Гибкость, проблема с промежутком между ними - CSS

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

вот мой код

<style> 
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s;
}
</style>
<body>
 <header>
        <a href="#" class="logo">Oussama<span>Lkd.</span></a>
        <ul class="navigation">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
</header>
</body>
Источник

2 ответа

Вам не хватает размера коробки. Добавьте приведенный ниже фрагмент в начало файла CSS.

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

         * {
  box-sizing: border-box;
}

Источник

Расчет flexbox выполняется без padding(источник). Вот почему добавление отступов и установка ширины элемента не дает ожидаемого результата.

Вы можете обойти это, установив правильное положение на 0 и не объявляя ширину.

         header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s;
  
  /* this is just to have a visual reference */
  border: 1px solid red;
}
         <body>
 <header>
        <a href="#" class="logo">Oussama<span>Lkd.</span></a>
        <ul class="navigation">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
</header>
</body>

Источник
Другие вопросы по тегам