[AYUDA] Problema al crear botonera horizontal CSS

[Daitron]

Hola a todos, bueno el tema es así estoy haciendo una botonera bastante sencilla, la cual lo unico que hace es cambiar el color cuando se le pone el mouse encima...

bien el tema es que quiero que quede bien posicionada dentro del recuadro de la botonera y no lo logro...

Bien lo primero les dejo las imagenes del problema y de lo que quiero conseguir...

PROBLEMA: (tamaño de la imagen 1440x900 click para agrandar)

Como ven en el problema no se como hacer para que me ocupe todo el lugar que necesito exactamente

LO QUE NECESITO (esta hecho en photoshop)

Como ven ocupa todo el ancho de los 748 pixels el color claro pero cuando pongo el mouse encima del boton se pinta la totalidad del alto de la botonera...

Ahora los codigos:
Codigo CSS de la botonera:

Código CSS:

#botonera{
height:30px; width:748px;
margin:auto; margin-top:5px;
background-color:#fb83b6;
border-bottom:#ff0c73 solid 1px; border-top:#ff0c73 solid 1px;
color:#FFFFFF;
}
 
#botonera ul li {
display: inline;
padding: 2px 7px; /*Separar el texto*/
}
 
#botonera ul li:hover {
background-color:#ff0c73; /* Color de fondo sobre el boton */
cursor: pointer; /* cambiar el aspecto del puntero */
}
 

Ahora el HTML

Código HTML:

<div id="botonera">
    
        <ul>
            <li>SOLIDARIDAD EN VENDIMIA</li>
            <li>BODEGAS Y VIÑEDOS</li>
            <li>ACONCAGUA</li>
            <li>RIOS</li>
        </ul>
 
 
    </div>
 

Bueno espero alguno pueda ayudarme y desde ya muchisimas gracias.