Fixed Position werfen meiner Header-Zentrierung, wenn ich die Breite des Headers auf 100% setzen warum?

Question

Lassen Sie uns sagen, ich habe einen Header:

header { 
    background-color: $main-background-color; 
    height: 86px; 

      #headerContent { 
       background-color: $main-background-color; 
       height:86px; 
       margin:0px auto 0px auto; 
       width: $site-width; 
      } 
} 

Wenn sich ein Benutzer in den Header-Einstellungen geändert werden:

header { 
    background-color: $main-background-color; 
    position:fixed; 
    width:100%; 
    height: 40px; 

     #headerContent { 
      position:relative; 
      background-color: $main-background-color; 
      width: $site-width; 
      margin:0px auto 0px auto; 
      height:40px; 
       img { 
        margin-top:12px; 
       } 
     } 

} 

Was ich will, ist wissen, warum alle Schlamassel meine Zentrierung tut, wenn der Kopfbreite ist auf automatisch gesetzt? Ich kann nur% verwenden. Ermittelt der Browser, was 100% ist? Wenn ich auto benutze, scheint die Kopfzeile zu verschwinden und ich kann nur mein headercontent div sehen, welches dann nach links von der Seite verschoben wird.

Ich habe es jetzt funktioniert aber möchte nur verstehen, was vor sich geht.

Mit freundlichen Grüßen

Answer 1

Position fixed & absolute sind Standard nehmen Inhalt width & height. Deshalb, wenn Sie definieren, ist es Inhalt width. Es ist besser left & right anstelle von width:100% dafür zu definieren. Gefällt mir:

header{ 
right:0; 
left:0; 
position:fixed; 
} 

Answer 2

Ich glaube, das Problem von position:fixed auf Ihrem Kopf kommt. Wenn Sie Elemente fixieren, brechen sie aus dem normalen Seitenfluss aus und der Container wird auf die Größe seines Inhalts reduziert. Um zu testen, wenn Sie die position:fixed Deklaration entfernen, sollten Sie sehen, dass Sie die Breite nicht auf 100% setzen müssen.