title: center ul navigation in header
body: <p>I have tried to search for this answer as I know this has been asked many times, every previous suggestion I found is not working for me. How can I get this ul nav to be centered and not float right? Thank you!</p>
  
  <p><a href="https://jsfiddle.net/kimwild/51r8tgo7/" rel="nofollow">jsfiddle link here</a></p>
  
  <pre><code>    &lt;header&gt;
    &lt;div id="header-content"&gt;
      &lt;nav class="header"&gt;
        &lt;input class="menu-btn" type="checkbox" id="menu-btn" /&gt;
        &lt;label class="menu-icon" for="menu-btn"&gt;&lt;span class="navicon"&gt;&lt;/span&gt;&lt;/label&gt;
        &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#work"&gt;Our Work&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#careers"&gt;Careers&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  nav.header {
      width: 100%; 
      height: auto;
      float: right;
      background-color: Silver;
      text-align: left;
      margin: 0 0 10px 0;
  }
  .header ul {
      display: inline-block;
      list-style-type: none;
      text-align: center;
      margin: 0;
      padding: 0;
  }
  .header ul li {
      display: block;
      float: left;
  }
  .header li a {
      display: block;
      float: left; 
      padding: 1em;
      /*  border-right: 1px solid #f4f4f4;*/
      text-decoration: none;
      color: #000000;
  }
  .header li a:hover {
      background-color: #B5B5B5;
  }
  </code></pre>