Logo positionieren und Größe anpassen

Hallo zusammen,

1.

Wenn ich mein Logo so zentrieren möchte wird es zwar zentriert, aber in der selben Reihe sind noch weitere Objekte (Anmeldung und Warenkorb) und so orientiert sich das Logo nicht an der kompletten Breite der Seite, sondern an den anderen Objekten:

#logo {

display: flex;

justify-content: center;

align-items: center;

}

Kann mir jemand sagen wie ich es nun hinbekomme dass das Logo die anderen Elemente auf gleicher Höhe ignoriert und sich an der kompletten Breite der Seite orientiert und sich zentriert?

2.

Irgendwie kann ich die Größe des Logos nicht ändern.

Wenn ich so mit CSS auf das Logo zugreife ändert sich gar nichts:

#logo {

height: 200px;

width: 200px;

}

Edit:

Komisch ist dass sich der Bereich um das Logo schon vergrößert, aber das Logo selbst ändert seine Größe nicht.

Jemand eine Ahnung an was das liegen kann?

Hallo Sempervivum,

vielen Dank für deine Antwort.

Ich weiß ehrlich gesagt nicht wo ich die dazugehörigen HTML Dateien finde.

Ich habe die bisherigen Änderungen in der "custom.css" Datei vorgenommen. Wie die ID heißt habe ich über die Element-Informationen im Safari Browser raus gefunden.

Die Möglichkeit "Center a flex item when adjacent items vary in size" hat zwar das Logo in die Mitte gebracht, jedoch steht jetzt der Rand über.

Also z.B. das Logo steht jetzt in die Suchleiste hinein.

Wie kann ich denn der "position: absolute;" einen "Rahmen" geben, welcher die anderen Elemente um sich rum "abstößt"?

Grüße