На полноэкранной версии меню имеет равные отступы с другми флекс-элементами
При разрешении менее 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 
