Homepage Text under Main Image, overlaps at the bottom

Hi folks
When you hit the homepage of thehdaf.co.uk currently (its a working process) the text under the main heading image overlaps the image.
If you refresh it puts it in the right place, but obviously people won’t know that, what can I do to ensure there is spacing and the text doesn’t overlap?
I have put in a widget HTML with a space in it but it doesn’t seem to have worked.

hey there

This is what I have in the initial page load in chrome and in the edge, both look normal without any problem, https://tinyurl.com/y5x7xq55

hello, It seems to be still doing this and the client has also noticed it when they hit the home page. The text is sitting in the bottom of the main image. Is there a way to put a space between the text and the image to stop it doing this?

hey there

Ok, please add this CSS in appearance - customize - additional CSS:

#text-5 {
background: #fff;
}

Thanks!
Colorlib Support Team