title: CSS - Want to center LI items in my navbar DIV
body: <p>I have a navbar on my blog, inside a few divs. I've been tweaking it for 3 hours, but I still can't figure out why the <code>li</code> items aren't centered in the middle of the navbar div. Can someone please help? Here's my code:</p>
  
  <pre><code>#NavbarMenu {background: #FFF; width: 100%; height: 40px;font-size: 14px; color: #3297FD; font-weight: bold; margin: 0 auto 0; padding:0px; line-height: 20px; text-align : center;}
  .navbarleft{width:738px; text-align: center;}
  
  #nav {margin: 0; padding: 0; list-style: none; text-align:center;}
  #nav ul { list-style: none; margin: auto; padding: 0; text-align: center; width: 100%; background: #3297FD; }
  #nav li {list-style: none; margin: 0; padding: 0; text-align:center; background: #FFF;}
  
  #nav li a, #nav li a:link, #nav li a:visited {color: #3297FD; display: block; font-family:arial; text-transform: uppercase; font-weight: bold; margin: 0; padding: 9px 18px 9px; }
  #nav li a:hover, #nav li a:active {background: #2D89E5; color: #fff; margin: 0; padding: 9px 18px 9px; text-decoration: none;height: 20px; text-align:center;}
  
  #nav li li a, #nav li li a:link, #nav li li a:visited {background: #3297FD; width: 200px; color: #FFF; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 0px solid #fff; text-align:center;}
  #nav li li a:hover, #nav li li a:active {background:#111; color: #fff; padding: 7px 10px; text-align:center;}
  
  #nav li {float: left; padding: 0; }
  #nav li ul {z-index: 0; position: absolute; height: auto; left: -999em; width: 180px; margin-left: 50%; padding: 0; text-align:center;}
  #nav li ul a {width: 180px; text-align:center;}
  #nav li ul ul {margin: -32px 0 0 171px; text-align:center;}
  #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}
  #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {text-align:center;}
  #nav li:hover, #nav li.sfhover {position: static;
  }
  
  #main_navigation {
  width: 100%;
  margin-auto;
  text-align : center;
  }
  
  &lt;div id="main_navigation"&gt;
  
  &lt;div id='NavbarMenu"&gt;
  
  &lt;div class='navbarleft'&gt;&lt;center&gt;&lt;ul id='nav'&gt;
  
  &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href="/about.me"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/ask"&gt;Ask&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://twitter.com/ThatsWhatKidsDO"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/support"&gt;Submit&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/tagged/typography"&gt;Typography&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.tumblr.com/directory/recommend/typography/epicjamess"&gt;Reccommend&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/FAQ"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;&lt;/center&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/center&gt;
  </code></pre>