How to center a simple navbar? - html

Question

I've been struggling for hours to center my nav bar.
Here it is :
[[1]: https://i.stack.imgur.com/Wi2RD.png][1]
As you can see, the nav elements are slightly to the left, and not centered to the body. (the body is perfectly centered).
Here's my code :
header {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(0deg, rgba(164, 174, 228, 0.05), rgba(164, 174, 228, 0.05)), #080B1C;
}
.logohome {
position: relative;
width: 350px;
display: flex;
}
.nav__links a,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
margin-right: 18rem;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #A4AEE4;
}
.NP {
position: absolute;
margin-right: 4.6rem;
right: 0;
color: #24252a;
font-family: "Montserrat";
font-weight: 700;
font-style: normal;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.profile {
border-radius: 50%;
margin-right: 4rem;
width: 50px;
transition: background-color 0.3s ease 0s;
z-index: 0;
}
.dropbtn {
position: absolute;
margin-left: 4.5rem;
bottom: 2px;
width: 25px;
background-color: transparent;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
And the html :
<header>
<img href="google.com" class="logohome" src="images/logo.png"><br><br>
<nav>
<ul class="nav__links">
<li>Mes Favoris </li>
<li>Accueil</li>
<li>Mes Statistiques</li>
<img src="/images/navstate.png" class="navstate">
</ul>
</nav>
<a class="cta" href="#"></a>
<img src="/images/iconeprofile.png" class="profile">
<div class="NP">NP
<div class="dropdown">
</div>
<img src="/images/drop.png" onclick="myFunction()" class="dropbtn">
<div id="myDropdown" class="dropdown-content">
Mon profil
Nous contacter
Déconnexion
</div>
</div>
</header>
what parameters should I change or implement to make it works simply nice? (I don't want to do super responsive bar, but just clean, the purpose is a web app)

Answer 1

This will fix it. All your elements except the last one will have margin-right. Also don't forget to reset ul margin and padding if needed.
.nav__links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav__links li:not(:last-child) {
margin-right: 18rem;
}