Zentrieren responsive header - WordPress Blog

Question

Ich habe mehrere Methoden ausprobiert, aber kann nicht scheinen, jeden Teil davon erreicht zu bekommen. Ich habe einen Wordpress-Blog für jemanden gemacht und sie war glücklich damit, aber kürzlich wollte der Header geändert werden. Ich hatte es weit und sie wollte es boxed/zentriert. Der Header enthält Logo, Nav und zwei Bilder auf der linken Seite, die der Klient im Grunde für Looks dort platziert haben wollte. Der Blog reagiert und sobald der Bildschirm einen bestimmten Punkt erreicht, entspricht der Header dem Container des Rests der Seite. Aber auf Fullscreen-Laptop/Desktop beginnt es immer noch viel breiter mit nur ein wenig Polsterung auf jeder Seite. Wenn ich es auf die richtige Breite aufpasse, wird es zu klein, wenn sich der Bildschirm ändert. Ich möchte immer die gleiche Breite des Hauptschiebers und des Containers haben.

Der Blog ist bei http://www.allloveblog.com

Die CSS ich zur Zeit für den Header haben:

.fusion-header{ 
position:relative; 
display:block; 
/*width:100%;*/ 
/*padding-left:162px; 
padding-right:160px;*/ 
padding-top:0px; 
padding-bottom:0px; 
} 

.fusion-header-wrapper{ 
position:relative; 
display:block; 
width:100%; 
float:center; 

} 

Wenn Sie Ihr Browserfenster ändern können Sie sehen, wo der Wechsel stattfindet, und es wird so schnell bleiben wie es ist die Breite der anderen Container, ich brauche es nur, um an der Breite des Containers zu beginnen.

Jede Hilfe wird sehr geschätzt.

Answer 1

Ich glaube, alles, was Sie tun müssen, ist dies:

.fusion-header-wrapper { 
    max-width: 1160px; 
    margin: 0 auto; 
} 

Falls Sie einige CSS-Regeln zu überschreiben müssen nur body vor der Klasse hinzufügen. Auf diese Weise wird Ihre Regel priorisiert und Sie können Ihre Regeln leicht identifizieren. Wie folgt aus:

body .fusion-header-wrapper { 
    max-width: 1160px; 
    margin: 0 auto; 
} 

ERKLÄRUNG
Im Grunde, was Sie mit einer Breite Begrenzung der Header gesetzt zu tun notwendig, um die Hauptbreite Grenze max-width: 1160px; passend und natürlich den Header Zentrieren mit margin: 0 auto;

#main hat 30px padding links und Recht.
Innen #main haben wir .fusion-row mit max-width: 1100px;
Innen .fusion-header-wrapper wir haben .fusion-header mit 30px padding links und rechts.
Also, wenn Sie max-width: 1100px; setzen, werden Sie bemerken, dass Sie 60 mehr px wegen der Polsterungen auf anderen Divs hinzufügen müssen.

P.S. Stellen Sie sicher, dass Sie ein untergeordnetes Thema zum Bearbeiten des vorhandenen WP-Designs erstellen.