Défilement horizontal

Question

Je prépare une maquette pour une nouvelle mise en page HTML. Il est presque là, mais je reçois un problème de défilement horizontal ennuyeux sur ma barre d'en-tête.

Bien que les éléments contenant sont 100% de largeur, l'en-tête semble être coupé à la zone de défilement horizontale.

html, 
body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: purple; 
} 
#wrapper { 
    width: 100%; 
    height: 100%; 
    background: Red; 
    min-width: 100%; 
    position: relative; 
} 
header { 
    height: 48px; 
    width: 100%; 
    min-width: 100%; 
    background: Orange; 
} 

J'ai mis la maquette dans un violon ici: https://jsfiddle.net/8k51k83r/

Notez que si vous faites défiler horizontalement, l'en-tête semble se terminer là où commence le défilement horizontal.

Des idées de ce que j'ai mal fait ici?

Answer 1

Vous pouvez ajouter ceci: #wrapper{width:auto; display:inline-block;}