How to remove the collapse of elements when reducing the screen resolution?

Question

css

On the full screen version, the menu has equal padding with other flex elements.


At a resolution of less than 1500 px, I made a two-line menu using the grid, but then when the resolution is reduced, the elements collapse with each other and I don’t understand why.

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

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

How can I make it so that when the screen resolution is reduced, the menu has equal indents with other flex elements?

All code https://jsfiddle.net/zobq0nma/
Site itself ilini0v1.beget.tech