<div class="container">  
  <p>
    Without specifying a width, the navigation will take up the width of its container, no matter how many items there are inside it.
  </p>   
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <hr>
  <p>
    Using <code>fit-content</code>, the nav will <strong>fit</strong> the content inside it, and can be centered inside the container without having to use other tricks to do that.
  </p>
  <ul class="fit-content">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  border: 1px solid #aaa;
  padding: 20px;
  background-color: white;
}

hr {
  margin: 50px 0;
}

ul li {
  float: left;
  padding: .5em;
  background-color: #888;
  color: #111;
}

ul {
  background-color: #111;
  overflow: hidden;
  list-style: none;
  padding: .5em;
}

.fit-content {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}