Custom css to control positioning of elements and padding

Hi GeneratePress team,

I'm currently working on building a new homepage for my site (can be viewed here: https://www.cleardesign.studio/scroll-information/). As you'll be able to see, I'm having troubles with the content of each slide staying contained within the viewport especially on smaller screens or when zooming in.

The site I'm taking inspiration from has set up each slide in a clever way to ensure it works responsively at all viewport sizes. The text and button is positioned perfectly at 125% zoom and 80%, for example.
https://www.alexcoven.com/

I'm wondering if you might be able to help me work out how I can achieve this with CSS?

Thank you in advance!