How to remove side padding from a container?

Question

css

There is the following gallery: sandbox
All elements of the gallery have the following styles:

.gallery__unit {
    min-width: 283px;
    display: flex;
    position: relative;
    justify-content: center;
    padding: 5px;
    flex: 1 0 calc(25% - 30px);
    height: 325px;
    overflow: hidden;
}

If the block is large, then a class with styles is added to the emu:

.large {
    position: relative;
    flex: 0 0 50%;
}

The parent container itself:

.gallery {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: space-between;
}

As you can see, the gallery elements have paddings: padding: 5px;
But I want to make the gallery fill the width of the screen, without 5px side padding. How to do it?
It will not work to specify different padding-left and padding-right for different blocks, because flexbox (everything jumps and adjusts to the screen) I thought to specify negative margins for the parent container, but then everything shifts to the right by 5px and extra padding appears on the right.

Answer 1

I thought to indicate negative margins to the parent container

Yes, everything is correct, they just need to be compensated by the width.
https://jsfiddle.net/s3Lm0p75/