Mobile view big gap between header and content

Hi, I’ve noticed that when viewing my page on a mobile device there is a big gap between the header image and the page content. This does not seem to happen every time, or on every mobile device, but it happens often and means that when people arrive on the page they could think it is empty, not knowing to scroll down for the content.

I’ve already tried various methods and CSS to fix this (though I’m a novice at these things) and had no luck. Can you help me with a way to fix this?

Here is a screenshot from my phone showing the gap, sometimes it is smaller than this but sometimes it’s larger so the content is nowhere on the screen at all: https://rockandrolltraffic.com/wp-content/uploads/2020/09/r.jpg

Many thanks in advance for the help,
Cameron.

Website: www.rockandrolltraffic.com