Double header

I have added the following code to my style.css file:

*/
/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

Couse the responsiveness doesn’t work ok on mobile devices and I want a larger width when you view the website on a desktop. The code gives the desired effect and the website looks good on desktop and phone.

The problem is that it messes up my header. I now get to see the header 2 times.

How can I fix the header?