horizontal menu coloring goes wrong - html

Question

<div id="header">
<div id="logo">
<h1>Look Around You</h1>
</div>
<div id="horNav">
<ul class="horNav">
<li class="horNav">HOME</li>
<li class="horNav">SUBMIT-CONTACT</li>
</ul>
<ul class="horNav-last">
<li class="horNav">TAGS</li>
</ul>
<ul class="advertisment">
<li>ABOUT</li>
<li>ADVERTISEMENT</li>
</ul>
</div>
</div>
css is:
#wrapper{
width:80%;
margin:0 auto;
min-width:920px;
}
#header, #logo{
width: 100%;
float:left;
}
#horNav{
background:black;
width: 80%;
color:white;
margin: 0 auto;
}
#horNav a{
background: black;
}
.horNav li{
float:left;
border-right:1px solid #828282;
}
.horNav-last li{
float:left;
}
.advertisment li{
float:right;
border-left:1px solid #828282;
}
#horNav a{
display:block;
padding:5px 10px;
color:white;
font-size: 13px;
}
#horNav a:hover{
background:#828282;
}
what happens is that unordered lists are colored black in separate corners and middle of #horNav is white as you can see it HERE but of course it needs to be all black. how to fix this?

Answer 1

#horNav {
overflow: hidden;
display: block;
width: 100%;
}
#horNav can be whatever width you want e.g. 80% as it is now, and if you want it to be centred you can reintroduce the margin: 0 auto;.