如何在导航栏下添加文本

Question

请问如何在导航栏下添加文字，我试过移动文字，但有没有更简单的方法呢？我尝试进行基本的文本移动，但它似乎不起作用。

CSS 代码主要是动画，如果有人可以移动段落 (p)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
body {
  margin: 0;
  background: #ED952D;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #0F0A0A;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
  color: white;
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: white;
  transition: 3s ease-in-out infinite alternate;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background: grey;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

<div class="container">
  <h1 class="logo"></h1>
  <nav>
    <ul>
      <li><a href="FIBA.html">FIBA</a></li>
      <li><a href="HISTORY.html">HISTORY</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>
<header>
  <p>start of the info</p>
</header>

Answer 1

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
body {
  margin: 0;
  background: #ED952D;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}

header {
  width: 80%;
  padding: 0 10%;
  background: #0F0A0A;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
  color: white;
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: white;
  transition: 3s ease-in-out infinite alternate;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background: grey;
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

<header>
  <h1 class="logo"></h1>
  <nav>
    <ul>
      <li><a href="#">Basic</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>Here is some text</p>
</main>

如何在导航栏下添加文本

How do I add text under the navbar

html

css

navbar