Question

For some strange reason, my text-align: center; 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 text-align option isn’t even showing in Firebug.

Could anyone help me out here?

HTML:

<div id="main-menu">
    <ul id="main-menu-links" class="links clearfix">
       <li class="menu-286 first active">
          <a class="active" title="" href="/dashboard">Dashboard</a>
       </li>
       <li class="menu-194">
         <a href="Organisation">Organisation</a>
       </li>
    </ul>
</div>

CSS: (I have tried to place text-align: center in each selector, but with no result…)

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;
}

Answer 1

It’s working as intended, when I wrap the <ul>...</ul> elements in a <div id="main-menu">:
http://jsfiddle.net/6bBK5/

Make sure that you use the correct selectors. IDs are case-sensitive, spaces in the selector are significant.