How to center the text in a nav with float:left - html

Question

What css do I need to centrally align the top level nav in my nav bar? I've been playing around with it for ages but can't get it sorted.
HTML Code
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<a href="#" class="level-top" > <span>Women</span></a>
<ul class="level0">
<li class="level1 nav-1-1 first"><a href="#" ><span>Tops</span></a></li>
<li class="level1 nav-1-2 last"><a href="#" ><span>Accessories</span></a>/li>
</ul>
</li>
<li class="level0 nav-2 level-top">
<a href="#" class="level-top" ><span>Men</span></a>
</li>
<li class="level0 nav-3 level-top">
<a href="#" class="level-top" ><span>Accessories</span></a>
</li>
</ul>
CSS Code
/********** < Navigation */
.nav-container {
background-color: #FFF;
border-color: #444;
border-top-style: solid;
border-bottom-style: solid;
border-width: 2px; width: 100%; margin:10px 0 0 0; height: 28px;position: relative;
}
.nav-container select { margin: 18px 0; }
.nav-container select { width: 100% }
#nav { float: left;
font-size: 15px;
margin: 0;
width: 100%;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-align:center; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; text-decoration:none; text-transform:uppercase; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
/* 0 Level */
#nav li {
float: left;
padding: 4px 12px;
}
#nav li.active a { color: #999999; }
#nav a { color: #555555;
float: left;
font-weight: bold;
padding-right: 11px; font-family:Arial, Helvetica, sans-serif; }
#nav li.over a,
#nav a:hover { color: #999999; }
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:30px; left:-10000px; border:1px solid #bbb; padding:3px 8px; background:#fcfcfc; }
#nav div ul { position:static; width:auto; border:none; padding:0; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0;}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
.flex-direction-nav {display:none;}
/********** Navigation > */
EDIT
I was able to center the top level by changing to this code...
/* 0 Level */
#nav li { float: none; display:inline-block; }
But this made my second nav level items buch up together on one line?

Answer 1

change the css to this,
#nav {
font-size: 15px;
margin: 0 auto;
width:310px;
}
give #nav a fixed width and remove the float:left;

Answer 2

ul {text-align: center; width:100%}
ul li {display: inline-block; float: none;}
You should write your css like this.. I mean ul should be in full width and text-align:center property, its li should have display: inline-block property and it should not float to left or right;

Answer 3

It is not happening because ul has 100% width.
If you want ul to be in center, then its parent element must have fixed width and text-align:center.
Here is the fiddle.