如何制作一个充满屏幕的导航栏？

Question

I am beginner. I want to make a similar bar to this, but I do not succeed to make the bar fill all the screen and I have no idea how I could make the text to be aligned as in the picture.

To put that logo in the middle of the div I used this id.

#clogo {
    height: 50px;
    margin: auto;
    display: block;            
}

Answer 1

You could use display: flex to center items and width: 100% to make the navbar full width like so:

HTML:

<nav>
  <ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
    <li>link5</li>
  </ul>
</nav>

CSS:

nav {
  width: 100%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  height: 50px;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  font-size: 20px;
}