Header keeps moving up and down

Hi – sorry I’m still having problems with the header on this website – when I scroll down the page and then scroll back up again the header has moved. I’ve got the following custom CSS:

#header_main_alternate, #header {
transform: translateZ(0);
}

footer#socket {
-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}

@media only screen and (max-width: 768px) {
.header_color .header_bg { background-size: contain; }}

Could you tell me what I’ve done/how I can stop it from doing that!

Thanks!