Align gallery to center?

Question

css

https://goreska.github.io/nlalmaty/

I can't position the gallery block on the adaptive, on the desktop version I aligned the block with flexes, wrapped it in wrap, and aligned justify-content: centerit, setting the wrapper width to 100% and the gallery width to 90%. But on mobile - width 575 for example - the block is again pressed to the left edge. Help.
UPD, for a resolution of 575, the output was found in the form of transform -50%, the blocks are positioned in the center, but if we apply the same transform for a resolution of 768, let's say, the blocks overlap each other

Answer 1

If so try?

@media screen and (max-width: 575px) {
  .grid-item {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

Answer 2

@media (max-width: 575.98px)
.grid {
    width: 50vw;
}
.grid-item {
   width:100%;
}

As an option, but the pictures will cut a little