con chrome no se ajusta menu al ancho de caja

[trevol]

Hola amigos, pues resulta que tengo un menú en un div contenido en otro div principal, es decir dentro del div principal hay un div menú, pues bien lo que sucede es que con los navegadores internet e y firefox no tengo problemas y el div menú se adapta al div principal es decir toma su mismo ancho cosa que busco, sin embargo con chrome el menu se queda mas o menos a la mitad del div principal pongo Código css y html haber si pueden ayudarme, gracias.

Código CSS:

#navcontainer {
   margin-top: 0px;
   margin-left: -0.1em;
   padding: 0;
   height: 20px;
            }
 
#navlist {
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
            }
 
#navlist li {
   display: block;
   float: left;
   text-align: center;
   padding: 0;
   margin: 0;
}
 
#navlist li a {
   font:Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
   font-size:16px;
   background: #006ab3;
   width: 8.72em;
   height: 25px;
   border: 1px solid black;
   padding: 0;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   display: block;
   color: white;
   text-decoration: none;
   text-align:center;
            }
 
#navlist li a:hover {
   background: #ffd800;
    color: #006ab3;
                    }
 
#navlist li a:active {
   background: #ffd800; 
   color: #006ab3; 
                    }
 
#navlist .selecionado {
   background: #ffd800; 
   color: #006ab3;
                    }
 

Código HTML:

<div class="principal"> 
    <div id="navcontainer"> 
      <ul id="navlist">
        <li><a class="selecionado" href="index.php" >Inicio</a></li>
        <li><a href="quienes_somos.php">quienes somos</a></li>
        <li><a href="productos.php">productos</a></li>
        <li><a href="promociones.php">promociones</a></li>
        <li><a href="contacto.php">contacto</a></li>
      </ul>
    </div>
</div>
</div>