Codepen: https://codepen.io/pitthan/pen/yLYOgdj
HTML:
<nav id ="menu1">
<ul id= "lista-ho">
<li><a href = "">O Vale dos Desconhecidos</a></li>
<li><a href = "">Quartos</a></li>
<li><a href = "">Serviços</a></li>
<li><a href = "">Eventos</a></li>
<li><a href = "">Calendário de Eventos</a></li>
<li><a href = "">Galeria</a></li>
<li><a href = "">Localização</a></li>
</ul>
</nav>
CSS:
ul#lista-ho li{
display: inline-block;
}
ul#lista-ho li a{
color: whitesmoke;
font-size: 1.2em;
padding: 4px 10px;
margin: 0px;
border-radius: 10px;
box-shadow: 0px 1px 6px 1px #181818;
text-shadow: 1px 1px 3px #181818;
text-decoration: none;
background: radial-gradient(circle, rgba(147,143,143,1) 16%, rgba(115,114,114,1) 78%);
}
ul#lista-ho li a:hover{
background: radial-gradient(circle, rgba(113,108,108,1) 16%, rgba(87,86,86,0) 78%);
}
#menu1{
text-align: center;
}
So, I’m trying to align this menu I’ve created but there’s more space on the left than there’s on the right side and I don’t understand why this is happening.
I want to learn two things:
- How do I align the menu so that both spaces are even.
- How do I align the menu so that it occupies the whole width of the page