Header Crowding

Hello....How would I go about removing the crowding of the header image across platforms. Obviously there is a balance that must be determined as different resolutions will garner different results, but I'm trying to figure out how to create more space between the header banner and the header image when it comes to mobile. I have manually added a buffer to the image itself, but there surely must be some CSS Code to stop some of the overlapping that occurs after tweaking it to look good online, but not on a phone in portrait mode...Bring up the site below on your phone, and  you'll see the menu button and site identity logo are crowding the header image...I can add more buffer to the image to defeat this, but it ends up crowding the browser views... www.classickingdombookings.com