Question

After applying “margin: 0 auto” to an unordered list, a horizontal nav bar, I am able to center the list element but the items contained within the list are left justified within the list. The examples I’ve seen online don’t say anything about having to re-position the li elements so I suspect I’m doing something wrong. I can see that the list is actually centered because of the black border I have placed around it but the items are not.

#navBarList 
{
    width: 25%;
    margin: 0 auto;
    list-style-type: none;
    overflow: hidden;
    border-width: 3px;
    border-color: black;
    border-style: solid;     
}

#navBarList li 
{
   float: left;   
}
---------------------------------

<div id="navBarDiv">
    <ul id="navBarList">
        <li>Plots</li>
        <li>Reports</li>
        <li>Map</li>
    </ul>
</div>

Answer 1

I’m going to guess you meant to give a width to the li elements and not it’s containing ul element. Get rid of the margin: 0 auto; unless you want to center within the ul‘s container. list-style-type: none; should also be on the li elements, but I don’t think that matters, as floating them displays them as (floating) blocks and not list items. The corrected CSS is as follows:

#navBarList 
{
    overflow: hidden;
    border-width: 3px;
    border-color: black;
    border-style: solid;     
}

#navBarList li 
{
    list-style-type: none;  
    width: 25%;
    float:left;
}​

JSFiddle of your example (modified)

You may also need to add text-align: center; to the #navBarList li rule if you intended to center the text within the li elements.

Edit: Actually, I might have been wrong about the list items. Floating them in chrome makes them not act like list items, and I was thinking about another rule (inline items are floated as block elements). Not sure about that one.