Правильно ли сделан адаптив данного блока?

Question

И вообще можно ли это назвать адаптивом? Представьте, что я ваш злейший враг и что вам хочется оскорбить каждую мелочь, где я что-то не так сделал. Спасибо

@font-face {
  font-family: 'Gilroy-Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Gilroy-Bold'), url('Gilroy-Bold.woff') format('woff');
}

* {
  margin: 0;
  padding: 0;
}

.header {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 50;
}

.header__container {
  border: 1px double black;
  max-width: 960px;
  margin: 0px auto;
  min-height: 33px;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  padding: 0px, 15px;
}

.wrapper {
  min-height: 100%;
}

.menu-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.menu-item {
  display: flex;
  font-family: 'Gilroy-Bold';
  font-size: 18px;
  margin: 0px 155px 0px 0px;
  line-height: 20px;
}

.menu-item:last-child {
  margin: 0px 0px 0px 0px;
}

._container {
  border: 1px double black;
  max-width: 940px;
  margin: 0px auto;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  padding: 0px, 15px;
}

@media (max-width: 960px) {
  ._container {
    max-width: 710px;
  }
  .menu-item {
    font-size: 13px;
    margin: 0px 120px 0px 0px;
  }
  .menu-item:last-child {
    margin: 0px 0px 0px 0px;
  }
}

@media (max-width: 766px) {
  ._container {
    max-width: none;
  }
  .menu-item {
    font-size: 14px;
    margin: 0px 125px 0px 0px;
  }
  .menu-item:last-child {
    margin: 0px 0px 0px 0px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <div class="header__container _container">
        <div class="menu">
          <ul class="menu-list">
            <li class="menu-item">Home</li>
            <li class="menu-item">About me</li>
            <li class="menu-item">Skills</li>
            <li class="menu-item">Portfolio</li>
            <li class="menu-item">Contacts</li>
          </ul>

        </div>
      </div>
    </header>

  </div>
</body>

</html>

Answer 1

Неправильно. About me переносится, хотя места в строке предостаточно.

БЛОГ НА HUSL

Правильно ли сделан адаптив данного блока?

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