Responsive type keeps moving?

Can someone tell me how to best do this? I have a heading and a subhead on each page of my site. I’m not sure the best way to go about placing this text on my hero images. When the browser is not high enough (like on a laptop) the text gets pushed down.

I’d like the text to stay completely visible and not run out side of the hero image when the screen is resized.

Can you take a look and tell me what I’m doing wrong?


Here is my site Read-Only: Webflow - Listing Leaders - Michigan

(how to share your site Read-Only link)

I suggest this.

I made:
the top outside border of the header 18 “0”.
block 46 top “0”
then you can see the rest.

You can either adjust 46 to fit all pages or make a new div block if it’s too finicky on the specific page.