title: text-align: center isn't working
body: <p>For some strange reason, my <code>text-align: center;</code> isn't working. It's weird 'cause it's the most basic stuff to do for both HTML and developer, so I'm kind of embarrassed... I must doing something terrible wrong and don't see my mistake. The <code>text-align</code> option isn't even showing in Firebug.</p>
  
  <p>Could anyone help me out here?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="main-menu"&gt;
      &lt;ul id="main-menu-links" class="links clearfix"&gt;
         &lt;li class="menu-286 first active"&gt;
            &lt;a class="active" title="" href="/dashboard"&gt;Dashboard&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="menu-194"&gt;
           &lt;a href="Organisation"&gt;Organisation&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> (I have tried to place <code>text-align: center</code> in each selector, but with no result...)</p>
  
  <pre><code>div#main-menu {
      background-color: #c4d82d;
      border-radius: 0 0 5px 5px;
      -moz-border-radius: 0 0 5px 5px;
      -webkit-border-radius: 0 0 5px 5px;
  }
  
  div#main-menu ul {
      padding: 0px;
  }
  
  div#main-menu li{
      border-right: 1px solid #86a43f;
      width: 186px;
  }
  
  div#main-menu li.last{
      border: none;
  }
  
  div#main-menu a, div#main-menu a.active {
      background: none;
      text-shadow: none;
  }
  
  div#main-menu a:hover {
      background: none;
      font-style: italic;
  }
  </code></pre>