How to align a horizontal list?

HTML-CSS
1

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.

a
a1366×768 135 KB

I want to learn two things:

  1. How do I align the menu so that both spaces are even.
  2. How do I align the menu so that it occupies the whole width of the page
2

Hi @pitthan.np. Welcome to FCC. It would be more helpful if you also provided a link to your code so that one is able to experiment with it to trace the problem.

Your menu is not centered horizontally because the ul element has a default left padding of 40px

ul#lista-ho{
       padding: 0;
}

will center the menu items.

1 Like
3

A topic in CSS flexbox might help if you study it.
Firstly, the menu1 id must have the following:

position: flex;
justify-content: space-around;

The position tag set to flex enable the elements to be flexible while the justify-content tag tells the browser how to arrange the elements. There are series of options for the justify-content tag, they include:
flex-start
flex-end
space-between
space-around
space-evenly

Then add appropriate margin for the menu1 id if necessary.
After trying the above codes, I’m optimistic you find the ones that match your need as well as answer your questions.
Please don’t be annoyed if it doesn’t turn out the way you expected, instead try something else because CODES DONT LIE.

4

You can add a margin-left and margin-right that is equal and put the weight on auto for ex :

For the html : 
<div id="your-list"> <div>

For the Css:
#your-list {
weight: auto;
margin-left: 250px;
margin-right:250px;
}

But I’m not sure it’s the best option

5

Thanks. It solved my problem.