Hallo Lydia,

das liegt an der max-width Angabe für main, würde ich sagen. Diese Angabe limitiert die Breite des main-Elements auf 33em (Was ist ein em?), ist aber - denke ich - nicht nötig. Andreas wollte damit vermutlich erreichen, dass die Navigation nicht den Text im main-Teil überdeckt.

Bei einem Drop-Down Menü ist das aber eigentlich genau das, was man möchte. Damit der Hintergrundtext durch das Dropdown-Menü hindurch nicht sichtbar ist, braucht das Menü eine Hintergrundfarbe.

Im Beispiel ist es so, dass das nav-Element die Größe 0×0 hat, weil sein Inhalt, das details-Element, mit position:absolute herausgezogen und oben rechts platziert wird. Die Hintergrundfarbe muss deshalb für das details-Element gesetzt werden. Das Beispiel ist auf Darkmode ausgelegt und speichert seine Farbpalette in custom properties (die mit dem -- davor). Du könntest also dem details-Element hinzufügen:

   nav details {
      background-color: var(--bgcolor);
   }

mit var() liest Du den Inhalt eines custom property aus. Dadurch kann das Dropdown den möglicherweise darunterliegenden Text komplett überdecken und dieser Text muss nicht mit anderen Mitteln ferngehalten werden.

Ich habe das Beispiel entsprechend überarbeitet. Da war eh ein Typo drin (<header> war doppelt).

Rolf