* {
padding : 0;
margin : 0;
}
nav {
padding : 20px;
background-color : #809906;
list-style : none;
border-bottom : 2px solid black;
}
a {
color : black;
padding-right : 115px;
}
a:hover {
color : hotpink;
}<script src="https://kit.fontawesome.com/b75e3e30ff.js" crossorigin="anonymous"></script>
<nav>
<a href="#" style="padding-left: 5px;"><i class="fa-solid fa-bars"></i></a>
<a href="#"><i class="fa-solid fa-house"></i></a>
<a href="#"><i class="fa-solid fa-user"></i></a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</nav>I attempted various strategies, such as flexbox, to align the icons in the navbar centred but I was unsuccessful. My objective is to position all the icons at the centre of the navbar. As someone new to this field, I am still learning and experimenting.