Mystery Margin Or Padding On List

I cannot figure out where the padding is coming from the on the left of the list between each one: http://jsfiddle.net/spadez/rAQYL/15/ As far as I know, the following code should

Solution 1:

it is from

display: inline-block;

applied on #header ul li.

you can use

float: left;

or give

margin-left: -3(4)px to each li.

Solution 2:

You hadn't closed the a in your h1 for a start which was adding weird links between the items, but I believe the reason for the spacing is you haven't floated them and by default there is spacing between your li items when they have any variation of 'block' applied.

In the example below i've fixed the unclosed tag and added a float, hopefully this is what you were looking to do.

See this fiddle of it working

HTML:

<div id="container">
    <div id="header">
        <h1><a href="index.html">Admin</a></h1>
        <ul>
            <li><a href="jobs.html">Jobs</a></li>
            <li><a href="sites.html">Sites</a></li>
            <li><a href="feeds.html">Feeds</a></li>
        </ul>
    </div>
    <div id="content">Content goes here</div>
</div>

CSS:

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: Helvetica, Arial;
    font-size: 13px;
}
#header {
    background-color:#1ABC9C;
}
#header a {
    color: white;
    text-decoration:none;
}
#content {
    background-color:#EEEEEE;
    padding: 20px;
}
#header h1, #header ul li, #header ul {
    display: inline-block;
}
#header ul li, #header h1 {
    padding: 15px 20px;
    background: #16AD8F;
    float:left;
}

Solution 3:

Your list element are set to:

display:inline-block;

So there is space between them by default (it's treated like inline text, meaning that there is a space between each list). In order to clear that space you can add this:

#header ul { font-size: 0; }

Demo