Gradient in Navigation - working on some pages, not others?

Site URL: https://moose-semicircle-6ext.squarespace.com/

Hello!

I'm looking to achieve a gradient fade behind my navigation as I have a full width carousel. 

So I've used this code (found on another post here):

.Header {background: rgb(245,245,245);background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);}

header { position: fixed !important; width: 100%; z-index: 99999; }

@media only screen and (min-width:640px) { main { padding-top: 80px; } }

.Footer {background: rgb(253,177,57);background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);}

It works on the Services (2) page but on the home page and Services (1) - where there is a gallery behind the nav and where I need it to work - it isnt working, the gradient turns into a solid?. Any idea why it works as gradient one page, and solid the other? Thank you in advance! 

https://moose-semicircle-6ext.squarespace.com/

password: hello123

Thank you!

 New code

header.Header {
    background: #f5f5f5;
    background: linear-gradient(180deg,#f5f5f5 0%,#f5f5f5 0%,rgba(245,245,245,0) 100%) !important;
}

Thanks so much @tuanphan you're a wizard! 😄