При уменьшении разрешения экрана горизонтальный отступы уменьшаются неравномерно. Как исправить?

Question

[froggush]

есть следующий код

<div class="header"> 
  <div class="container header__container">
      <a class="logo" href="index.html"><img src="../images/icon-logo.png" alt="main-logo"/>atlantida </a>
      <nav class="header__nav">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">History</a>
          <a href="#">Team</a>
          <a href="#">Portfolio</a>
          <a href="#">Prices</a>
          <a href="blog.html">Blog</a>
          <a href="#">Contact</a>
      </nav>
     <div class="header__links"> 
         <a href="https://www.facebook.com/" target="_blank"><img src="../images/facebook-icon.png" alt="fcb-logo"/></a>
         <a href="https://twitter.com/" target="_blank"> <img src="../images/tweeter-icon.png" alt="tweet-logo"/></a>
         <a href="https://www.behance.net/" target="_blank"> <img src="../images/behance-icon.png" alt="behance-logo"/></a>
      </div>
  </div>
</div>

.header {
  min-width: 100vw;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
}

.container {
  min-width: 80vw;
  max-width: 80vw;
  min-height: 10vh;
  max-height: 10vh;
  padding: 0 2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__nav {
  display: flex;
  column-gap: 1vw;
  padding: 0 2vw;
}

.logo {
  display: flex;
  align-items: center;
  column-gap: 0.5vw;
  font-size: 2.5vh;
}

.header__links {
  display: flex;
  justify-content: space-between;
}

/*# sourceMappingURL=header.css.map */

при уменьшении страницы в инструментах разработчика, сначала уходит отступ справа и только потом начинает уходить отступ слева. если навести на элемент html мышкой, то отобразится, что его горизонтальные размеры меньше, чем существующий контент и контент, соответсвенно, выходит за его пределы.





как это исправить? как сделать, чтобы при уменьшении ширины экрана, header оставался всегда посередине?

Comments

[Steppp]

Это жесть)

min-width: 80vw;
  max-width: 80vw;
  min-height: 10vh;
  max-height: 10vh;

[froggush]

Steppp, почему? как нужно было? я раньше делал по другому и в пикселях, но тут недавно один товарищ мне заявил, что в пикселях -- древнее зло, вот я теперь пробую

[froggush]

Steppp, убрал max-width -- заработало. почему - не знаю. туплю жёстко. ни че го не понимаю

[Steppp]

froggush, Не думал что заработает! Но это жестоко так размеры задавать! Нельзя так!!!
Можно это min-width: 80vw; max-width: 80vw; заменить на это width: 80vw;
также и с height!
Надо понимать для чего нужна минимальная максимальная длина)
Пробуй лучше на rem, em ! Или посмотри что на мобиле получится, если телефон будешь переворачивать)

[froggush]

Steppp, спасибо!

[froggush]

Steppp, это удивительно, но оно нормально работает с min-width, но при добавлении max-width или замене на width опять начинает работать коряво.

Answer 1

[michaelvovk]

потому что контент внутри header больше чем он сам и так как flex-wrap по умолчанию nowrap, то блоки не переносятся.
плохая идея делать всё на vw и vh, конструкция очень ненадёжная получится, используй лучше проценты и пиксели