Styling and Placement of A Div Breaks On Smaller Screens

Hello all,

I have a webflow site that you can see here: Webflow - DSML

I setup two overlapping divs on the main page, similar to the instructions in this instructional video, starting at 11:00: https://youtu.be/1ViSR5fSDwg, however, the alignment breaks down at smaller screen sizes, and I’m not sure why.

Here’s the image on screens > 1440 pixels:

Here’s the same screen on a smaller screen size:

If you don’t have enough time to watch the video, I created a section, set minimum height to 70 vh, created a grid layout, added an image to one and a div block with header, paragraph, button in another, set both to manual layout, dragged the image to cover the entire background, and then moved the div block to the middle of the screen.

Thank you for your help!