Navigation bar glitches - html

Question

When I change the resolution of my navigation bar it glitches. Here is my HTML;
<!--Start header-->
<div id="header">
<div id="nav_header">
<ul id="list-nav">
Troll Happy
<li>iPhone Fail</li>
<li>Forever Alone</li>
<li>Rage Comics</li>
<li>Derpina</li>
<li>Okay face</li>
<li>Forums</li>
</ul>
</div>
</div>
<!--End header-->
And my CSS;
#header {
height:66px;
background-color:#000;
position: absolute;
width: 100%;
left:0;
}
#nav_header {
height:50px;
margin-left:100px;
}
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
}
ul#list-nav li {
display:inline;
font-family: Century Gothic, sans-serif;
font-size:13px;
font-weight:bold;
}
ul#list-nav li a {
text-decoration:none;
padding:15px 0;
width:110px;
color:#eee;
float:left;
text-align:center;
border-right:1px solid #353535;
}
You can see what is happening here;
trollhappy.co.uk
As you can see, if you change the resolution the navigation bar goes very glitchy!
Thanks again guys and girls

Answer 1

you just small mistakes, it follows;
u remove the margin-left:100px, insted margin:0px auto; and set width:840px;
#nav_header {
height: 50px;
margin: 0 auto;
width: 840px;
}
ok i understand the misstake, u set the body tag then work perfectly,,,,
body{
margin:-18px 0px 0px 0px;
}
ok friend on small changes do this,u add the min-width:1000px;
#header {
background-color: #000000;
height: 70px;
left: 0;
min-width: 1000px;
position: absolute;
right: 0;
}

Answer 2

Your <li><a> elements are being floated left, which means they'll overspill their container if they can't all fit in a single line because the container is horizontally too small.
For simplicity's sake you'll want to just hide the links rather than implement some nice graceful degradation for smaller screens (just make sure it looks nice with a browser window 960px wide). Just apply the overflow: hidden; style to #nav_header.