centering logo in fixed navigation - css

Question

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.
How do I use text-align to achieve desired result and still maintain a fixed navigation header?
current code:
<img src="img/logo.png" class="logo" />
<ul class="nav">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
css:
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;
}

Answer 1

Most obvious solution, break the menu into two and put the logo in the middle...then float each menu as required.
* {
margin: 0px;
padding: 0;
}
ul {
margin: 0;
list-style: none;
display: inline-block;
}
li {
display: inline-block;
}
a {
background: grey;
color: white;
padding: .5em;
}
nav {
text-align: center;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
<nav>
<ul class="nav left">
<li>A
</li>
<li>B
</li>
<li>C
</li>
</ul>
Logo
<ul class="nav right">
<li>D
</li>
<li>E
</li>
<li>F
</li>
</ul>
</nav>
Of course, you may want all the items bunched together..in which case you don't need the floats at all
JSFiddle Demo
Then again, there's this one I like (not mine) which is even better : Codepen Demo