Wie entsteht diese (eingezeichnete) HÖHE???

[Matthias Apsel]

Hallo einsiedler,

Du hast flex nicht verstanden.

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=22)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=22);

Uralt-IEs müssen unbedingt halbtransparente Grafiken anzeigen?? Die haben ganz andere Probleme. Zum Beispiel flex.

#MainNavi li:nth-child(1n)  {display: flex; flex: 1.1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(2n){display: flex; flex: 1.4; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(3n), #MainNavi li:nth-child(4n) {display: flex; flex: 1; justify-content: center; align-items: center; border: 1px dotted yellow;}
#MainNavi li:nth-child(5n) {display: flex; flex: 2.8; justify-content: center; align-items: center; border: 1px dotted yellow;}

Du hast auch CSS nicht verstanden.

Alles, was mit flex für die li zu tun hat, ist sinnfrei. Für dein gewünschtes Verhalten reicht

#MainNavi {
  display: flex;
  justify-content: space-between;
}

#MainNavi li a:link {

Dir ist bewusst, dass du nur die unbesuchten Links meinst?

#MainNavi li a:hover {

Was ist mit Leuten, die die Seite mit der Tastatur bedienen?

Noch zwei andere Anmerkungen:

• hgroup ist kein offizielles Element.
• Verwende keine p-Elemente für den "aktiven" Link sondern zum Beispiel span statt a oder <a> statt <a href=…>

Bis demnächst
Matthias