title: A better way to space out navigation bar items
body: <p>I'm trying to space these navigation bar items out evenly and there has to be a better way to do it then just giving all the li items a width and hoping they don't overflow.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;header&gt;
          &lt;div id="page_wrapper"&gt;
          &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Education&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Fun&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Entertainment&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Utilities&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header {
      background-color: #ccc;
  }
  
  nav {
      height: 48px;
  }
  
  nav ul {
      margin-left: auto;
      margin-right: auto;
  }
  
  nav li {
      display: inline-block;
      height: 100%;
      width: 10%;
  }
  
  nav li a {
      font-family: cursive;
      color: #ff1e4b;
      font-size: 16px;
      text-decoration: none;
  }
  
  nav li a:hover {
      color: #dd5771;
  }
  </code></pre>
  
  <p>JSFIDDLE: </p>
  
  <p><a href="https://jsfiddle.net/rkmkxjm0/" rel="nofollow noreferrer">https://jsfiddle.net/rkmkxjm0/</a></p>