tengo el siguiente hover superior:
Ahora mismo se ve así, pero el problema que tengo es que cuando toco inicio o sobre mi tendrían que ser ocupar el blanco hasta diseño grafico y queda un espacio negro en medio.
En el ejemmplo de la siguiente imagen se puede ver... las cajas son más anchas.. pero no sé como hacerlo por que hago ancho el contenedor pero no donde está la palabra diseño gráfico y luego el acho me pasa lo mismo...
Me gustaría saber como puedo hacer justo donde está la palabra diseño grafico que se haga más ancho la caja de texto para que ocupe más por arriba y abajo y luego aparte que los 5 botones sean igual de grandes las cajas.
mi código:
* {
color: white;
margin: 0;
padding: 0;
}
.contenedor {
background-color: black;
color: white;
}
.contenedor-menu {
display: flex;
justify-content: space-around;
width: 50%;
margin: 0 auto;
}
.contenedor-menu__elemento {
list-style: none;
}
.contenedor li:hover {
background-color: #fff;
color: #000;
}
El ejercicio me dice:
Tanto la línea negra del menú, como la imagen de la cabecera ocupan el 100% del ancho de la página. Los enlaces del menú estarán alineados al centro y el ancho máximo será de 960px