Question

I’m trying to build a very simple pure css navigation bar, but have hit a roadbump.
I’m using a html list, and the first item seems to have extra space to it’s left which I cannot get rid of.

Live Example

Also on JSFIDDLE [UPDATE: Strangely JSFIDDLE doesn’t display this problem, renders the nav bar as I want it to look, must be their back end that fixes whatever’s wrong.]

CSS:

body {
    font-family: sans-serif;
    font-size: 62.5%;
    color: #666;
    background-color: #e6e6e6;
    padding: 0;
    margin: 0;
    border: 0;
}
header {
    min-width: 400px;
    max-width: 700px;
    padding: 40px 8px 0;
    z-index: 2;
    position: relative;
}
header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
}
header nav li {
    float: left;
    font-size: 16px;
    line-height: 1;
    border-right: 1px solid #ddd;
    position: relative;
}
header nav li:first-child {
    border-left: 1px solid #ddd;
}
header nav li:last-child {
    border: none;
}
header nav li a {
    display: block;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    padding: 7px 15px;
}
header nav li a:hover {
    color: #000;
    background: #f6f6f6;
}

HTML:

<header>
<nav>
<ul>
    <li><a href="index.html">Welcome</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="join.html">Join A Team</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="faq.php">Facebook</a></li>
</ul>
</nav>
</header>

Would really appreciate if someone could help me out.

Answer 1

Remove padding from the <ul>.

header nav ul {
    display: block;
    float: left;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
    padding: 0;
}