Sticky Header Help

Hi!
I need a little help with my sticky header. It looks perfect on the desktop versions of Chrome and Firefox (and I believe Edge). However, it isn’t correct in Safari and mobile/tablet views. I have attached an image of what I am seeing (the full header height isn’t backed in white and the logo isn’t lining up with the navigation menu the same way). I am hoping I can get it to be consistent across platforms.

I have added this .css to get it where I like it (when viewed with Chrome or Firefox desktop versions). Perhaps I made a mistake?

#header-inner.nav-type-1 #logo {
padding-top: 40px !important;
padding-left: 50px !important;
}
.main-navigation {
margin-top: 60px;
padding-right: 50px;
}
#header-inner.nav-type-1 {
padding-bottom: 100px !important; }

Because the navigation menu and logo were not able to line up at all on mobile views I added this css:
@media handheld, only screen and (max-width: 1200px){
#main-nav {
display: none!important;
}
}
@media handheld, only screen and (max-width: 1200px){
#show-nav-menu {
display: inline-block;
}
}

I’m not sure if that was the correct or best route – but it did clean it up a little. I’d like to have the navigation bar menu, but I just couldn’t get it to work without it dropping the navigation menu bar “down a line”.

I hope this makes sense.
Here’s my site

Thank you!
Traci