1

Если добавить к ul display:flex, то ul уменьшится в ширине

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body {}

div {
  box-sizing: border-box;
}

li {
  list-style: none;
  display: inline-block;
}

header ul a {
  text-decoration: none;
  color: #292929;
  font-size: 16px;
  font-weight: normal;
  padding: 27px 6px;
  margin-right: 63px;
}

header {
  background: #f6f6f6;
  padding: 22px 0;
}

.header-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
}

header ul {
  display: flex;
  border: 1px solid red;
}

a:hover {
  background: #ffea00;
  transition: 500ms;
}

#menu-checkbox {
  display: none;
}

label {
  display: none;
}

header nav {
  margin-top: 45px;
}
<header>
  <div class="header-container">

    <nav role="navigation">

      <ul class="main-menu">
        <li><a href="#">HOME</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</header>

1
  • А вопрос какой?
    – Air
    25 авг 2018 в 6:20

1 ответ 1

1

Ваши li заданы как инлайн-блоки, а между такими блоками добавляются лишние просветы как между словами текста. (Проблема обсуждалась, например, здесь.)

Но когда ul становится флекс-контейнером, он превращает дочерние li во флекс-элементы. В этот момент просветы между ними пропадают, и ширина ряда уменьшается.

Each in-flow child of a flex container becomes a flex item
https://www.w3.org/TR/css-flexbox/#flex-items

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.