How to get html5 / css3 navigation bar for alignment at the top?

Question

I create my website in html css, etc. (work in college so that is the reason why), however I had a struggle with my navigation bar.

Firstly, it goes towards the page that I do not want. I want it to be at the top, for example, at the top. I use flexbox for my navigation bar and I like the size of each section. My code is:

body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia;
}
nav {
  background-color: #000000;
  color: #888;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
nav ul {
  float: left;
  display: block;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: top;
  list-style: none;
  text-align: center;
}
nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 56px;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
}

<nav>
  <ul>
    <li>
      <h1>Title</h1>
    </li>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="forum.html">Forum</a>
    </li>
    <li><a href="music.html">Music</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="shop.html">Shop</a>
    </li>
  </ul>
</nav>

Run codeHide result

Answer 1

float:top

Inadmissible.

The CSS float property can be declared as left|| rightor leave it like

Floating elements can be challenging in the best of times. Instead, you can use something like display:inline-block.

• additional information about floating elements

- , . ( "" "" ) , ( "" ). . float ; , "float". ~ w3.org

DEMO:

nav ul li {
  display:inline-block;
  vertical-align:middle;
  list-style: none;
  text-align: center;
}

body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia;
}
nav {
  background-color: #000000;
  color: #888;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
nav ul {  
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav ul li {
  display:inline-block;
  vertical-align:middle;
  list-style: none;
  text-align: center;
}
nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 56px;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
nav > ul > li:hover > a {
  color: rgb(255, 255, 255);
}

<nav>
  <ul>
    <li>
      <h1>Title</h1>
    </li>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="forum.html">Forum</a>
    </li>
    <li><a href="music.html">Music</a>
    </li>
    <li><a href="about.html">About</a>
    </li>
    <li><a href="shop.html">Shop</a>
    </li>
  </ul>
</nav>

Hide result

Answer 2

. , . Bootstrap. , , CSS JavaScript navbar = "navbar navbar-default navbar-fixed-top", . . , .