espacio izquierdo en lista horizontal

[evoarte]

buenas noches,

trato de personalizar un menú, y por muchas vueltas que le doy, hay una pequeña cosa, que no logro solucionar, cuando centro los elementos de la lista horizontalmente eliminando #menuhore li {float:left}, al cambiar el fondo de cada elemento con #menuhore a:hover hay un pequeño margen a la izquierda, de manera que no se cubre de border a border,

lo he revisado unas cuantas veces, y no lo veo, este es el código css, el código html es simplemente una lista ul con sus correspondientes elementos li para las opciones del menu:

Código CSS:

#menuhore {
     height: 40px;
     width: auto;
     margin: 0px auto;
     text-align: center;
     background: #455868;
     font-size: 11pt;
     font-family: Capriola, Arial, sans-serif;
     font-weight: normal;
     position: relative;
     border: 2px solid #455868;
     border-radius: 5px;
}
 
#menuhore ul {
     padding: 0px;
     margin: 0px auto;
     width: auto;
     height: 40px;
}
 
#menuhore li {
     display: inline;
     float: left;
}
 
#menuhore a {
     color: #fff;
     display: inline-block;
     width: auto;
     padding:0px 10px;
     text-align: center;
     text-decoration: none;
     line-height: 40px;
}
 
#menuhore li a {
     border-right: 1px solid #576979;
     box-sizing:border-box;
}
 
#menuhore li:last-child a {
     border-right: 0;
}
 
#menuhore a:hover, #menuhore a:active {
     background-color: #8c99a4;
}
 
#menuhore .active a {
     background-color: #8c99a4;
     cursor: default;
}
            
#menuhore a#pull {
     display: none;
}
 

gracias.

[C2am]

Faltaría el html o un enlace para poder reproducir el error que dices.
Saludos

[evoarte]

Código HTML:

<div id="menuhore" class="menuclear">
    <ul class="menuclear">
        <li id="id1"><a href="">Opción 1</a></li>
        <li id="id2"><a href="">Opción 2</a></li>
        <li id="id3"><a href="">Opción 3</a></li>
        <li id="id4"><a href="">Opción 4</a></li>
        <li id="id5"><a href="">Opción 5</a></li>
        <li id="id6"><a href="">Opción 6</a></li>
        <li id="id7"><a href="">Opción 7</a></li>
    </ul>
    <a href="#" id="pull">Menú</a>
</div>
 

[C2am]

Bueno evoarte, creo que este articulo seguro te servirá para adoptar alguna solución a tu problema:

http://ksesocss.blogspot.com/2012/03...empeno-en.html

Como verás hay varias alternativas, aunque no todas funcionan en todos los navegadores, así que verás que haces.

Podrías probar de centrar de otra forma, y para ello nada mejor que este otro articulo:
http://ksesocss.blogspot.com/2012/05...6-maneras.html

Saludos