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

Question

[Norum]

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


При разрешении менее 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

Comments

[HelpSophie]

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

Они и сейчас равные. И заодно равные нулю.
Вы ведь сами растянули меню на всю свободную площадь, откуда там возьмутся отступы, если вы их не прописали ручками?

[Irkov]

HelpSophie, подписываюсь под каждым словом. задайте gap что ли. А вообще меню не очень сделано. у первого пункта есть подуровни, которые выпадают и закрывают собой пункт меню "Этапы работы"