Horizontal menu in CSS won't align left??

Question

I asked this last night, but only got one answer which didn't really help. I have a horizontal menu navigation bar, and the first item will not line up flush against the left side of the ordered list. Any ideas? Thanks! Here's my code:

#navbar
{
width: 100%;
background: white;
border: 1px dotted;
}

.navbar ul
{
list-style-type:none;
}

.navbar li
{
display: inline;
float: left;
}

• Home


• About Us


• Services & Pricing


• Contact

YES! With both of your answers, I was able to do it. Thank you both, so much

Answer 1

kinda same as above but i would add "padding:0; margin:0;" to both the UL and the LI this will take care of any padding or margin for both and should eliminate the space

Answer 2

You need to zero out the default margins/paddings, and clear your floated li's. You also don't need the display:inline setting on floated elements. Try this:

* {
margin: 0;
padding: 0;
}

#navbar
{
width: 100%;
background: white;
border: 1px dotted;
overflow: auto;
}

#navbar ul
{
list-style-type:none;
}

#navbar li
{
float: left;
}

Answer 3

Here's what I came up with.

Answer 4

I'm doing the exact same thing at http://throughmylensphotoraphy.com

I would change your CSS .navbar ul and .navbar li to:

#navbar ul and
#navbar li

in #navbar li add this:

margin: 0;
padding: 0;

Answer 5

supply your ul#nav ul.sub1 sufficient width to hold all your menu products (e.g. width:600px). For IE use conditional comments to comprise CSS for basically the IE version your debugging.