Question

My brain isn’t working. Please, let yours work for mine for 1 minute.

The code is very simple.

<ul id="nav">
            <li><a href="">Plumbing</a></li>
            <li><a href="">Flooring</a></li>
            <li><a href="">Kitchen</a></li>
            <li><a href="">Bathroom</a></li>
            <li><a href="">Re-decoration</a></li>
            <li><a href="">Structural works</a></li>
            <li><a href="">Electrical</a></li>
            <li><a href="">Re-planning</a></li>
</ul>

And some CSS styling:

#nav {margin:auto;width:960px;height:29px;background: url(../images/navbg_03.gif);box-shadow: 0px 10px  30px #cccccc;}
#nav li {position:relative;display:block;float:left;}

So simple, but it boggles my mind as to why when I float it, it leaves a gap before the beginning of the element.

Answer 1

uls usually have padding or margin in the user agent styles, just add

#nav{
    padding:0;
    margin:0;
}