Streaming live at 10am (PST)

Responsive Website + Text overlapping

Hi ,
I was wondering if someone could help me?
I have created this website, its a fairly simple, one-page website.
I would like the middle section to include a slideshow of images, which are centred, on each click to the next image within the slider, I would like there to be descriptor text of the image attached to it.

I can’t seem to get the image to be centred and for the text to appear at a good height away from the image. Especially when I view the website on my desktop compared to my laptop or try to scale the website manually to see how the type and image are responding to the scaling.

Is there a way to make sure the text never overlaps the image and how the site looks stays the same on different screen sizes. I’ve attached a screenshot below of how I would like the website to look visually.
I would also really like this page to always stay looking like this and nothing dropping down outside of the screen, so no scrolling is there a way to ensure this and for all content to stay responsive to appear the same at every size?

I would greatly appreciate any help with this issue, thank you!

When scaling website, this is happening gap is very large between image and type

Here is my site Read-Only:
([how to share your site Read-Only link][2])