Mobile Bar on Artesia has too much padding

Site URL: https://www.eccotravels.com/

Hello!

I was working on my site today and looked at it on mobile to see how it was going. To my surprise, the mobile bar was absolutely gigantic (too much padding above and below the branding). I didn't do anything for it to become so large, it's always been very thin, which I loved. Now the mobile bar covers almost half of my phone screen. I can't even see the mobile menu options properly, they get cut off and the drop downs can't be seen. Desktop, to my knowledge is fine, this is a mysterious mobile problem.

Currently, my page has absolutely no CSS or custom anything on it. I'm creating a video to put as a homepage banner and that's literally the most exciting thing going on about it. I use the Artesia template, which I believe is a York family template. 

Please help me! How do I make this padding smaller? Could this be a glitch and it will go back to normal?

I'm happy to put in some custom CSS, nothing that I've searched even made a dent into changing things.  I uploaded screenshots from my phone so you can see the issue. 

THANK YOU SO MUCH!

You can contact SS Customer Care. If they can't help you, add this to Home > Design > Custom CSS

https://support.squarespace.com/hc/requests/new#choose-topic

@media screen and (max-width:767px) {
.mobile-branding-wrapper, label.mobile-nav-toggle-label {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
div#site {
    padding-top: 0 !important;
}
}