I'm currently working on creating a simple CSS-based navigation bar, but I've encountered an issue. The first item in my HTML list seems to have extra space to its left that I can't seem to remove.
Check out the live example here
Also available on JSFIDDLE [UPDATE: Interestingly, JSFIDDLE doesn't show this problem and displays the nav bar correctly - might be due to their backend fixing the issue.]
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>
I would greatly appreciate any assistance in solving this issue.