Edit History

De ce que je vois tu peux remplacer 

#header {
    position: fixed;
    width: 100%;
}

par

#header {
    position: sticky;
    top: 0px ;
    height: auto;
    width: 100%;
}

et supprimer ton padding de 11%, en tout cas pour la marge haute (donc remplacer par padding: 0 11% 11% 11%;).

Ca permet à ton header de rester dans le flow tout en gardant sa position au scroll.