#main-header #main-nav {
margin:5em 6em;
}
There's your problem:
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>...
Your H3
is part of main-header
with crazy margins
.
Try something like this instead:
See here: http://jsfiddle.net/aLSXn/3/
HTML:
<div id="container">
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>
<li class="main-nav-link"><a href="#">Nav1</a></li>
<li class="main-nav-link"><a href="#">Nav2</a></li>
<li class="main-nav-link"><a href="#">Nav3</a></li>
</ul>
</nav>
</header>
</div
CSS:
* {
margin:0;
padding:0;
}
html, body {
width:100%;
background:lightgray;
}
#container {
width:100%;
}
#main-header {
display:block;
}
#logo {
position:absolute;
top:0;
left:0;
}
#main-nav {
display:block;
background:gray;
margin:5em 6em;
}
#main-nav ul {
list-style:none;
}
#main-nav .main-nav-link {
display:inline-block;
}
#main-nav .main-nav-link a {
display:inline-block;
padding:0.8em 1em;
text-decoration:none;
color:white;
font:bold 1em arial;
}