Nav Area Encroaching Banner Image

Site URL: https://www.bodybybeth.co.uk/services

Hi, 

I have been creating a site and added some custom code to the nav area to make the logo sit flush with the banner. I also made it slightly bigger in depth as it looks better. I added code to the CSS area to do both of these things.

However, in making the navigation depth bigger, it has just started to crop into the banner image below it. I thought all the items on the site would have moved down with the navigation as I increased it, but all elements on the site stay the same position and the banner just grows and covers up what is there. As you can see it is cutting off the head in the picture, even though I put the focus selector circle right to the top when uploading it. Is there any way to move the banner down and the rest of the content under it as well and keep the navigation area the same height. I would like to try and keep the text in the banner sitting visually centre from the top and bottom of the banner also. 

Thanks in advance for any help.

Design -> Custom CSS

@media only screen and (max-width: 224px) {
  #page {
      margin-top: 25vw;
  }
}

@media only screen and (min-width: 225px) {
  #page {
      margin-top: 35vw;
  }
}

@media only screen and (min-width: 401px) {
  #page {
      margin-top: 40vw;
  }
}

@media only screen and (min-width: 501px) {
  #page {
      margin-top: 200px;
  }
}

#page .sections .page-section:first-child {
      padding-top: 0px !important;
}

That worked brilliantly! Thank you so much!

One other question I have if you could help is, on the homepage for example in the banner I have added a button and set that button to be large. But in the areas directly under this, where it has the lady in the yellow top and the 'About Beth' text, the button size cannot be set, as this is an image card section. Is there any way to code it so the image card section buttons are the same size as the large buttons, as just now, the are just ever so slightly different.

Thanks!