title: centering logo in fixed navigation
body: <p>I am currently using floats in order to place my logo in the center of my fixed navigation menu. The issue I'm facing currently is that the items I've floated to the right are displaying in reverse order.</p>
  
  <p>How do I use text-align to achieve desired result and still maintain a fixed navigation header? </p>
  
  <p>current code: </p>
  
  <pre><code>&lt;img src="img/logo.png" class="logo" /&gt;
  
  &lt;ul class="nav"&gt;
     &lt;li&gt;&lt;a href="#section1" class="item1"&gt;A&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#section2" class="item2"&gt;B&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#section3" class="item3"&gt;C&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#section4" class="item4"&gt;D&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#section5" class="item5"&gt;E&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#section6" class="item6"&gt;F&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>header {
    width: 100%;
    padding: 0, 100px, 0, 0;
    margin: 10px, 100px, 35px, 0 ;
    position: fixed;
    height: 6em;
    background: transparent;
    top: 0;
    z-index: 1;
  }
  header .logo {
    display: block;
    height: 110px;
    text-indent: -9999px;
    width: auto;
    margin: 0 auto;
    position: relative;
  }
  header ul {
    margin: -85px auto 0 auto;
    height: 10px;
    list-style: none;
  }
  
  header li:nth-child(1), header li:nth-child(2), header li:nth-child(3){
    float: left;
  }
  
  header li:nth-child(4), header li:nth-child(5), header li:nth-child(6){
    float: right;
  }
  </code></pre>