Logo Image Positioning

I've hated how my "logo image" (as Squarespace calls it) is positioned on mobile devices for a couple of months now. I think that the theme that I'm using (Avenue) doesn't handle navigation items being hidden as well as it could, and it's really been bugging me that there's hardly any spacing between the logo and the top of the screen.

Ew gross

Ew gross

I had tried playing with Squarespace's layout adjustment GUI several times, but hadn't been able to figure out the right incantations to adjust the logo positioning for only "phone width." So stand back everybody! I'm doing CSS! 

@media only screen and (max-width: 750px) {
   #logo {
    padding-top: 40px
  }
}
Ahhh... that's much better.

Ahhh... that's much better.

It's possible that nobody else even noticed or cared about the positioning before, but now that it's fixed I feel like I can rest easy. And if you're on a desktop browser right now, I'd appreciate it if you would adjust your window width a bunch and bask in the responsive logo image positioning greatness.