Der Header mit Flexbox

Als Nächstes kommt der Header. Er wird zu einem dunklen Balken über die ganze Breite der Seite, mit dem Logo am linken und der Navigation am rechten Ende, beide in der Mitte seiner Höhe. Genau das hast du in der Flexbox-Lektion gemacht: Der Header wird zum Flex-Container, seine zwei Kinder, das Logo und nav, werden zu Flex-Items, und justify-content: space-between schiebt sie an die beiden Enden.

Die Farbe des Balkens ist #1e1b4b, ein tiefes Indigo wie der Nachthimmel über dem Kino (oder eine dunkle Farbe deiner Wahl). Das Padding 16px 32px gibt ihm oben und unten 16 Pixel und links und rechts 32 Pixel.

Auf dunklem Hintergrund sind blaue Links schwer zu lesen, deshalb werden die Links im Header weiß. Und sie werden nicht unterstrichen: In einer Navigation sind Links auch ohne Unterstreichung klar genug. Die Unterstreichung steuert die Eigenschaft text-decoration, und der Wert none entfernt sie:

header a {
    color: white;
    text-decoration: none;
}

Die Regel für header a gestaltet alle Links im Header, auch das Logo. Dann bekommt das Logo in einer Regel für seine Klasse eine eigene Größe und Stärke.

Schließlich stehen die zwei Links der Navigation direkt nebeneinander. Auch nav wird zum Flex-Container, und gap setzt Platz zwischen sie.