Fixed header makes lay-out errors

https://codepen.io/Sjoerd89/pen/pEzEva (website is ofline so have to do like this)

Hi everyone,

i am having some issues with the layout of my site and i think it is because i have a fixed header and navigation. Sometimes items on the site will go behind the top like the featured image. More of these things i found don’t really work with this fixed header.

.custom-fixed-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
}

@media (max-width 700px) {
	.custom-fixed-header {
		width: 700px
	}
}

.container {
      padding-top: 120px;
}

The above CSS is what i use for the header and navigation to be fixed.
What should i change to optimize this?

-using GeneratePress but don’t think this is really theme related

Thanks for your time!

Sjoerd