Hey! A few reasons this could be. A useful tool that is often overlooked is found right in your screenshots— “Explain Box Margins”— select an element in your responsive editor and press that button.
Theres probably something misaligned or even a sneaky invisible element making things wonky. Good luck
I get that the group is centered in the responsive editor, but is it truly in the center of the page in the UI builder? Those different size margins suggest not.
Also, this element is going to cause you some responsive problems:
My suggestion is for you to remove that element, then get the responsiveness working and then add it back in ensuring that it doesn’t break what you’ve done to that point.