Question

I have an unordered list that I am using as a simple navigation bar. That looks like below:

As you can see though that <li> elements are not aligning all the way to the left of the <div> they are contained in. I have tried text-align: left; in the containing <div> but that seems to have no effect.

    #menu {
        width: 800px;
        margin: 0 auto;
    }
    
    #menu div {
        float: left;
        width: 400px;
        height: 60px;
        background-color: #CACACA;
    }
    
    #menutop {
        text-align: left;
    }
    
    #menutop ul {
        list-style: none;
    }
    
    #menutop li {
       display: inline;
       padding: 10px;
    }
    
    #menutop a {
        color: #000000;
        text-decoration: none;
    }
    
    #menutop a:hover {
        text-decoration: underline;
    }
      

    <div id="menu">                                                                         
        <div id="menutop">                                                                  
            <ul>                                                                            
                <li><a href="#">Home</a></li>                                               
                <li><a href="#">About</a></li>                                              
            </ul>                                                                           
        </div>     

Any ideas?

Answer 1

ul and li have margin or padding, depending on the browser, by default. You need to override this default style within your menu:

#menu ul, #menu li {
    margin: 0; padding: 0;
}

See a demo here

^{Note: By default, jsfiddles does a CSS reset, so is not always well suited for testing this kind of thing. Make sure to disable “Normalized CSS” when looking for this kind of bug.}