Overlaying elements in responsive design

Hello dear community, I’m trying to solve this for long time already and broke my head over it.
I have many elements in the design where two elements overlay with each other and you also can see some backgrounds from sections above and below this overlays.


The problem is that it’s not working out for the responsiveness: the elements rather not sticking in the middle but make a white space between or grow in a weird way that you can see almost nothing from the picture. If I set the max width for the section, then they leave white spaces on the sides. Please let me know if you have an idea how to solve it.

This is the design in Figma


Screenshot 2023-02-02 at 14.43.23


Here is my site Read-Only