Mein Problem ist, dass das Header Seiten Logo auf einer Seite in der Breite der Webseite angezeigt wird und in der anderen die volle Breite angezeigt wird.
Wenn ich dich richtig verstehe, meinst du mit https://fau...log.com/
(Domain anonymisiert) die Website, bei der das Logo nur die Inhaltsbreite einnimmt? Und https://abm...eiz.ch/
(Domain anonymisiert) wäre die Website bei der … das Logo etwas kleiner angezeigt wird? Von „voller Breite“ kann da keine Rede sein. So wie in deinem Screenshot sieht die Seite in meinem Browser nicht aus.
Noch rasch ein freundlicher Hinweis bezüglich CSS: du bekommst WordPress und die Themes und Plugins im WordPress-Verzeichnis bereits kostenlos (und so, wie sie sind) zur Verfügung gestellt und wenn sich bei der Anwendung Probleme ergeben, stehen wir gerne kostenlos mit Tipps zur Seite. Wir nehmen aber nicht auf Zuruf Änderungen vor und können auch keine Grundlagen in CSS, HTML, PHP, JavaScript usw. vermitteln, weil das hier den Rahmen einer ehrenamtlichen Hilfe sprengen würde.
Gelegentlich (und immer ohne einen daraus abzuleitenden Anspruch) helfen wir schon mal mit CSS-Regeln aus, wenn wir für die betreffenden Websites die URL kennen und sich die Regel mit wenig Aufwand ableiten lässt.
Obwohl wir hier wie gesagt keine Grundlagen vermitteln wollen, noch rasch ein Kommentar zum von dir geteilten CSS:
img { max-width: 100%; height: auto; }
bedeutet, dass jedes Bild das in die Website eingefügt wird (also auch in Beiträgen und Seiten) eine maximale Größe von 100% des umgebenden Containers erhält. Unter Umständen ändert sich durch diese Regel an Bildern gar nichts, weil sie sowieso kleiner sind, als der umgebende Container. Ausgenommen von dieser Regel sind Hintergrundbilder, die mit einer CSS-Regel festgelegt werden, wie bei deinen Websites der Hintergrund des Headers. Hier greift die Regel grundsätzlich nicht.
#af-wrapper #forum-navigation a,
#af-wrapper #forum-navigation-mobile a {
color: #000000 !important; }
… ist eine CSS-Regel, um Links in schwarz auszugeben. Die Verwendung von !important
sollte immer als eine Notlösung angesehen werden, weil es sich nicht so leicht von anderen CSS-Regel überschreiben lässt. Auf deine Bild-Hintergründe im Header hat das überhaupt keinen Einfluss.
#masthead-wrapper { background-size: contain; }
… legt fest, dass das Hintergrundbild in den Block des Masthead-Wrappers eingepasst werden soll. Dabei wird aber auch die Höhe des Wrappers berücksichtigt. Die Beispiele auf https://developer.mozilla.org/en-US/docs/Web/CSS/background-size verdeutlichen das sehr schön.
Grundsätzlich sind die Header selten so gedacht, dass sie ein Banner in einer fixen Abmessung beinhalten, weil es dann sehr schwierig wird mit dem responsive Design auf mobilen Endgeräten. Auf einem 27″-Monitor sieht ein auf Inhaltsbreite hochskaliertes Headerbild auch sehr komisch (und außerdem durch die Skalierung sehr unscharf) aus. Du solltest dir zur Gestaltung etwas anderes einfallen lassen, um die Schrifzüge zu platzieren.