Problem Sticky Header CSS

Good afternoon,

I wanted to make the top header of a template that I'm making stay fixed. I have no problem doing that since I used it.

.header {
position: fixed;
width: 100%;
top: 0px;
}

The problem is that the content below is now under the header. Then I use

.container {
margin-top: 20px;
}

The problem is that in responsive you can see blank margins between the header and the container. The container is an image with a title. A hero.

What can I do to make that container "stick" to the header on all devices? Let's say you can take that margin automatically without any spaces.