Code causing issues with mobile view

Hello, 

I had my website designed, but the designer is no longer available. I am having an issue when adding pages. They appear ok on the desktop view, but in mobile view the header is overlapping the start of the content (images below of the issue)

Squarespace help have said: "With that said, I believe I can see what you’re referring to. On your homepage when you click Edit, it appears the top section is in 2 sections, one on the left (tan background) and one on the right (image background). And when you’re clicking Edit Section when hovering over either, it only shows the 'Edit Section' options for the right one with the image.
 
It appears that the reason is because you have entered custom CSS into your site that is controlling this layout. On Squarespace there are no sections that are left and right, sections only stack on top of one another and take up the entire width of the site. The CSS seems to be causing the section to appear that it is broken into 2 sections side by side, making the one on the left non editable"

I have no idea where to start to fix this - would anyone be able to offer any advice please? Thank you SO much. 

Desktop view: 

Mobile view: 

Were you able to fix it? I'm not seeing the issue in browser or on my mobile.

It appears that you have this code in your Custom CSS that is causing the padding in the header to be very large:

.header .header-announcement-bar-wrapper {
    padding-top: 9.5vw;
    padding-bottom: 9.5vw;
}

There also should be a margin added to the top of every first section so the top of the page (and in this case your head in the photo) is not cut off:

I think there's some coding gone awry here.