Inconsistent Fixed Header When Mobile Device Flipped to Landscape(Brine)

Site URL: https://alison-mcgee.squarespace.com/

Hi! I've got a fixed header on my Brine 7.0 site. When using a mobile device flipped in a landscape position, it will do 1 of three things:

1. List all the folder names in a row so that they're cut off. Fixed header doesn't work.
2. Folder names stack, but fixed header doesn't work.
3. Folder names stack and suddenly the fixed header works.

So basically, sometimes it works and sometimes it doesn't. If I refresh my device then it is automatically fixed. 

How do I make it work all the time? 

For your reference, here's the code I added: 

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

@media screen and (min-width: 640px) {
  .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
    padding-top: 81px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}