Use the flex rule for selector .navsection. It should look like this:
.navsection {
display: flex;
justify-content: center;
align-items: center;
background-color: cadetblue;
}
.navsection{
display: flex;
justify-content: center;
align-items: center;
background-color: cadetblue;
}
.navsection ul{
margin: 0;
padding: 0;
list-style: none;
/* display: table;
margin: 0 auto; */
}
.navsection ul li{
display: block;
float: left;
}
.navsection ul li a{
text-decoration: none;
color: rgb(116, 4, 26);
display: inline-block;
padding: 10px 20px;
background: rgb(127, 210, 212);
margin: 5px 2px;
}<div class="navsection tem clear">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>second solution (no flex):
Remove the float: left and make display: inline-block instead of display: block in the .navsection ul li selector.
It should be like this:
.navsection ul li{
display: inline-block;
/*float: left; */
}
.navsection{
background-color: cadetblue;
text-align: center;
}
.navsection ul{
margin: 0;
padding: 0;
list-style: none;
/* display: table;
margin: 0 auto; */
}
.navsection ul li{
display: inline-block;
/*float: left; */
}
.navsection ul li a{
text-decoration: none;
color: rgb(116, 4, 26);
display: inline-block;
padding: 10px 20px;
background: rgb(127, 210, 212);
margin: 5px 2px;
}<div class="navsection tem clear">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>