Question: I'm trying to center the menu bar links. In the css every time I try to center it, it puts each link on a new line. So I make it `float:center`; and it makes each link a new line and just doesn't center it all. Any ideas?

```css
body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
```

```html
<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>
```

Answer: 
use `display:flex` and `justify-content:center` in your `ul` (remove the `float:left` from `li`)

`Float:center` doesn't exist.

```css
body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display:flex;
  justify-content:center
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}
```

```html
<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>
```
Just add `text-align:center` to your `ul` and `display:inline-block;` to your `li` like this:

```
ul {
    text-align:center;
}
li {
    display:inline-block;
}

```

Here's a jsFiddle with above codes: <https://jsfiddle.net/AndrewL32/4jendh7j/>