Issues with website appearance on mobile

I think I could use some clarification on how the two areas for images at the top of the page work (header logo vs. header image), as per my prior reply.

I found this topic in the forum: https://colorlibsupport.com/t/how-to-remove-white-space-around-header-images-and-or-logo-in-travelify/

I got bold and played around a little with the margins/padding in the stylesheet (having zero knowledge of CSS), using a Header IMAGE, with no/disabled header LOGO. It still looks like there is a bit of space up top. I tried having on header IMAGE and uploading it as the header logo but the image wasn’t as sharp and I still had an issue with the excess space, especially when viewing it on mobile phone.

Thanks!