Блог

Я уже несколько часов пытаюсь выровнять навигационную панель.

Вот он :

[[1]: https://i.stack.imgur.com/Wi2RD.png][1]

Как вы можете видеть, навигационные элементы расположены немного левее, а не по центру тела. (тело идеально центрировано).

Вот мой код :

 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; }   

И html :

 lt;headergt;  lt;img href="google.com" class="logohome" src="images/logo.png"gt;lt;brgt;lt;brgt;   lt;navgt;  lt;ul class="nav__links"gt;   lt;ligt;lt;a href="/favoris.html"gt;Mes Favoris lt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Accueillt;/agt;lt;/ligt;  lt;ligt;lt;a href="/stats.html"gt;Mes Statistiqueslt;/agt;lt;/ligt;   lt;img src="/images/navstate.png" class="navstate"gt;   lt;/ulgt;  lt;/navgt;  lt;a class="cta" href="#"gt;lt;/agt;   lt;img src="/images/iconeprofile.png" class="profile"gt;  lt;div class="NP"gt;NP  lt;div class="dropdown"gt;  lt;/divgt;  lt;img src="/images/drop.png" onclick="myFunction()" class="dropbtn"gt;  lt;div id="myDropdown" class="dropdown-content"gt;  lt;a href="#"gt;Mon profillt;/agt;  lt;a href="#"gt;Nous contacterlt;/agt;  lt;a href="#"gt;Déconnexionlt;/agt;  lt;/divgt;  lt;/divgt;  lt;/headergt;   

какие параметры я должен изменить или реализовать, чтобы это работало просто хорошо? (Я не хочу делать супер отзывчивую панель, а просто чистую, цель-веб-приложение)

Это все исправит. Все ваши элементы, кроме последнего, будут иметь margin-right . Также не забудьте сбросить ul поля и отступы, если это необходимо.

 .nav__links {  list-style: none;  display: flex;  margin: 0;  padding: 0; } .nav__links li:not(:last-child) {  margin-right: 18rem; }