Problema menu horizontal 
, soy nuevo por aqui y tambien en html5 y css3, necesito ayuda con este menu horizontal que hice, funciona bien ¿creo?, lo unico malo es la parte inferio, aparece una franja que no se de donde sale, esa es mi duda averiguiar de donde sale dichosa franja y eliminarla, dejo una imagen esta remarcada con un recuadro rojo.Se agradece cualquier comentario.
Código:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body{
margin:0px;
padding:0px;
}
#contenedor_menu2{
background-color: rgb(69,69,69);
}
#centrado{
width:75%;
margin:auto;
}
#button {
list-style-type: none;
margin:0px;
padding:0px;
}
#button li {
float:left;
position:relative;
}
#button li a {
text-decoration: none;
color: rgb(191,191,191);
padding: 0px 20px 0px 20px;
background: url(../imagenes/divider2.gif) repeat-y right top;
display:block;
height:50px;
line-height:50px;
margin:0px;
}
#button li:last-child a {
background: none;
}
#button li a:hover {
text-decoration:underline;
}
#button li .seleccionado{
background-color:rgb(53,53,53);
color:white;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
</head>
<body>
<!--==============================Inicio Menu 1=================================-->
<div id="contenedor_menu2">
<div id="centrado">
<nav>
<ul id="button" class ="clearfix">
<li><a href="#" class="seleccionado">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTES</a></li>
<li><a href="#">PRODUCTOS</a></li>
<li><a href="#">F.A.Q</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<!--==============================Fin Menu 1=================================-->
</body>
</html>
