Werid spacing to the left inside of DIV help!

For some reason theres a space to the left inside of the div

heres a picture of what i'm seeing http://tinypic.com/r/msc2h/7

CSS

 div {margin:auto;}

 开发者_运维百科   li{padding: 0px; margin: 0px; display: inline; float:left;}

    ul{height: 20px; text-align: left; vertical-align: center; margin: auto;}

HTML

<div style="border: 1px solid white; width: 500px;">
    <ul>
    <li>Home&nbsp;</li>
    <li>Product&nbsp;&nbsp;</li>
    <li>Links&nbsp;&nbsp;</li>
    <li>Contact Us&nbsp;&nbsp;</li>
    <li>Abuot Us</li>
    </ul>
</div>

You should have padding/margin set to 0 for UL as well. Ul has padding by itself.

It's not from the div, it's from the padding/margin that your browser sets for you if you don't override it. Try this:

    div {
        margin: auto;
        border: 1px solid white;
        width: 500px;
    }

    li {
        padding: 0;
        margin: 0 5px;
        display: inline;
        float: left;
    }

    ul {
        height: 20px;
        text-align: left;
        vertical-align: center;
        padding: 0;
        margin: 0;
    }

I've noticed that you were using   to add spaces between your list items, that's just plain messy and redundant, so I've added margin: 0 5px; for each list item.

So erase all those   and move the border and width properties to the CSS, which I've done above since it's good practice.

    <div>
        <ul>
        <li>Home</li>
        <li>Product</li>
        <li>Links</li>
        <li>Contact Us</li>
        <li>About US</li>
        </ul>
    </div>

To learn more why it's a good practice to separate structure (HTML) and presentation (CSS) watch these great videos from Google: HTML, CSS, and Javascript from the Ground Up.

It might be that margin:auto on the ul, which will basically center the ul in the div. With this kind of list that can behave unexpectedly.

Are you using developer tools like firebug or chrome's built in "Inspect element" tool to take a closer look? They will highlight each individual element by itself and tell you exactly what values are being used for margin/padding/everything. It can really speed up this kind of problem solving. Another easy way to see what's going on is to give everything a 1px border of a different color. That way you can better tell if the problem is inside or outside the ul, or even somehow on one of the li.