Почему блок nav не уменьшается?

Question

[Shan0102]

вот код HTML:

<nav class="nav">
    <div class="conteiner">
      <div class="nav-main">
        <ul class="nav-list bold">
          <li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#about" class="nav-link">About me</a></li>
          <li class="nav-item"><a href="#skill" class="nav-link">Skills</a></li>
          <li class="nav-item"><a href="#portfolio" class="nav-link">Portfolio</a></li>
          <li class="nav-item"><a href="#contact" class="nav-link">Contacts</a></li>
        </ul>
      </div>
    </div>
 </nav>

вот код CSS:

.nav {
width: 100%;
position: fixed;
top: 0;
padding-top: 25px;
padding-bottom: 25px;
}

.conteiner {
max-width: 940px;
margin: 0 auto;
}

.nav-list {
display: flex;
justify-content: space-between;
align-items: center;
}

Comments

[Дмитрий Кузнецов]

1. Оформите код в специальный тег.
2. А вы его уменьшаете вообще?
3. А где html код? Мы гадать должны что ли как устроен у вас код?

[Ankhena]

А почему он должен уменьшаться?

Если вы хотите, чтобы флекс-элементы переносились на следующие строки, то используйте flex-wrap: wrap

Answer 1

[GAS-ART]

.nav {
width: 100%;
position: fixed;
....
}

Это раскидывает его на всю ширину. Причин для его уменьшения нет никаких.