horizontal menu coloring goes wrong

<div id="header">
        <div id="logo">
            <h1><a href="http://lookaroundyou.net">Look Around You</a></h1>
        </div>
        <div id="horNav">
            <ul class="horNav">
                <li class="horNav"><a href="#">HOME</a></li>
                <li class="horNav"><a href="#">SUBMIT-CONTACT</a></li>
            </ul>
            <ul class="horNav-last">
                <li class="horNav"><a href="#">TAGS</a></li>
            </ul>
            <ul class="advertisment">
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">ADVERTISEMENT</a></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?

---

#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;.