Как убрать схлопывание элементов при уменьшении разрешения экрана?

Question

На полноэкранной версии меню имеет равные отступы с другми флекс-элементами

При разрешении менее 1500 px я с помощью грида сделал двухстрочное меню, но далее при уменьшении разрешения элементы схлопываются друг с другом и я не понимаю почему.

@media screen and (max-width: 1500px) {
  

   .menu > ul  {
      display:  grid;
      width: 100%;
      grid-template-columns: repeat(4, max-content);
      background-color: red;
  }
}

Как сделать так, чтобы при уменьшении разрешения экрана, меню имело равные отступы с другими флекс-элементами?

Весь код https://jsfiddle.net/zobq0nma/ Сам сайт ilini0v1.beget.tech

Answer 1

Напишите в ваш медиа запрос @media screen and (max-width: 1500px) следующее:

.menu {
    margin: 0 10px;
  }

Отступы от меню будут по 10 пикселей с обоих сторон

Вот так по итогу должно выглядеть:

@media screen and (max-width: 1500px) {
  .menu > ul  {
    display:  grid;
    width: 100%;
    grid-template-columns: repeat(4, max-content);
    background-color: red;
  }

  .menu {
    margin: 0 10px;
  }
}

БЛОГ НА HUSL

Как убрать схлопывание элементов при уменьшении разрешения экрана?

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