Элементы списка кучкуются, хотя задаю justify-content: space-around

Question

*{
    margin: 0;
    padding: 0;
}
.wr {
    margin-left: auto;
    margin-right: auto;
    max-width: 1022px
}
nav {
    max-width: 1022px;
    height: 65px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
nav > ul {
    list-style-type: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}
nav > ul > li > a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-family: Seymour One;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: left;
    text-transform: uppercase;
}
header {
    background: rgb(172, 188, 139);
    height: 65px;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Seymour+One&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="wr">
            <nav>
                <ul>
                    <li>
                        <a href="#">Обо мне</a>
                    </li>
                    <li>
                        <a href="#">Скиллы</a>
                    </li>
                    <li>
                        <a href="#">Портфолио</a>
                    </li>
                    <li>
                        <a href="#">Контакты</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

Answer 1

Вы не задали родительскому элементу списка показатель ширины, потому и не выравнивает.

* {
  margin: 0;
  padding: 0;
}

.wr {
  margin-left: auto;
  margin-right: auto;
  max-width: 1022px;
}

nav {
  max-width: 1022px;
  height: 65px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

nav>ul {
  width: 100%;
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

nav>ul>li>a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-family: Seymour One, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: left;
  text-transform: uppercase;
}

header {
  background: rgb(172, 188, 139);
  height: 65px;
}

<header>
  <div class="wr">
    <nav>
      <ul>
        <li>
          <a href="#">Обо мне</a>
        </li>
        <li>
          <a href="#">Скиллы</a>
        </li>
        <li>
          <a href="#">Портфолио</a>
        </li>
        <li>
          <a href="#">Контакты</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

БЛОГ НА HUSL

Элементы списка кучкуются, хотя задаю justify-content: space-around

Ответы (1 шт):