Varias dudas en mi proyecto

[Sette]

mira, he adaptado esto, y me sigue quedando lo mismo, el espacio al final puedes verlo en la url

Código:

<div="menu">
    <div class="interior">
    <div style="clear: both;"></div>
        <ul id="navi">
            <li><a href="#">El Club</a></li>
            <li><a href="#">Atletismo</a></li>
            <li><a href="#">Balonmano</a></li>
            <li><a href="#">Baloncesto</a></li>
            <li><a href="#">Piraguismo</a></li>
            <li><a href="#">Histórico</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </div>
</div><!-- fin div menu -->

Código:

#navi li{
    float: left;
    list-style: none;
}

#navi li a {
    display:block;
    width:131px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Verdana;
    font-size: 10px;
    text-decoration:none;
    text-align:center;
    font-size:11px;
    color:#FFFFFF;
    background-color:#96bcf3;
    border-left:10px solid #fff;  //Agrego un borde ancho a la izquierda
}

#navi li a:hover {
    color:#050773;
    background-color:#fff;
    border-left-color:#000; //Luego le cambio el color al borde en el evento hover.
}