jean_gaben
@jean_gaben

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

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

<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 мышкой, то отобразится, что его горизонтальные размеры меньше, чем существующий контент и контент, соответсвенно, выходит за его пределы.

K1YsfNGn2_A.jpg?size=1920x942&quality=96&sign=47c51f0aeb364d52a8fa0864d2c7c884&type=album

H187xQFaqBM.jpg?size=1920x948&quality=96&sign=4d0c2f0be777c4efdcf38dc80bb3f260&type=album

как это исправить? как сделать, чтобы при уменьшении ширины экрана, header оставался всегда посередине?
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
@michaelvovk
потому что контент внутри header больше чем он сам и так как flex-wrap по умолчанию nowrap, то блоки не переносятся.
плохая идея делать всё на vw и vh, конструкция очень ненадёжная получится, используй лучше проценты и пиксели
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы