Hallo heinetz, eine Flexbox brauchst Du da nur, wenn der Footer eine variable Höhe haben soll und die Einträge darin sich automatisch anpassen sollen. Das scheint hier nicht der Fall zu sein. Wenn es Dir nur darum geht, zwischen den Farbstreifen des Footers keine Lücken zu haben, in denen die Hintergrundfarbe des Footer durchscheint, dann gib den .center und .bottom Bereichen einen Blockformatierungs-Kontext. Das geht klassisch mit `overflow:hidden`, im Kommen ist auch `display: flow-root` (derzeit nur FF+Chrome). Dadurch bleiben die Margins der p und ul Elemente innerhalb des Bereichs, statt darüber hinaus zu laufen. Aber mal ANGENOMMEN, flexbox würde Sinn ergeben. Dann wäre dein CSS in folgenden Punkten optimierungsfähig: - Geh zur nächsten Webotheke und besorge Dir Semantin Forte, das hilft wirksam gegen Divitis. - Das heißt: Freunde dich mit semantischem Markup an. Verwende statt `div class='o-footer'` das footer Element. - Darin setzt Du mit h2 eine Überschrift, wenn's denn sein muss (aber nicht h1, weil die eigentlich nur einmal auf der Seite sein soll). Für die Überschrift brauchst Du keinen weiteren Container, das h2 Element kann für sich stehen. Du musst nur mit margin:0 und padding: 1em 0 (oder so) dafür sorgen, dass es vollständig gefüllt ist - wenn das denn sein muss. - Für center und bottom nimmst Du sections. Die kannst Du mit Klassen identifizieren, oder im css mit :nth-of-type(1) / :nth-of-type(2) ansprechen. WENN Du Klassen nimmst, dann nicht center und bottom, sondern benenne sie nach dem Sachzusammenhang. - Deine Breitenakrobatik wirst Du los, wenn Du `flex-wrap:wrap` durch `flex-direction:column` ersetzt. Ob Du überhaupt einen Container brauchst, außer dem footer selbst, hängt von deinen Anforderungen an die Farbgebung ab. Wenn der Footer eine andere Hintergrundfarbe haben soll als der Body und diese Farbe über die ganze Viewportbreite gehen soll, dann brauchst Du EINEN Container innerhalb des Footer. Diesen Container ernennst Du zur Flexbox. Wenn der Footer die Hintergrundfarbe des Body haben kann, machst Du den footer zur Flexbox und gibst ihm den zentrierenden Margin sowie die max-width. Es könnte auch sinnvoll sein, max-width: 82em und margin: 0 auto; an den Body zu legen, um die komplette Seitenbreite zu limitieren. Dann brauchst Du Dich auf header/main/footer Ebene damit nicht zu befassen. Aber wie gesagt, das hängt von deinen Wünschen zur Farbgebung ab. Ich habe mal - ohne Flex - so gemacht: <https://jsfiddle.net/Rolf_b/41n4p45r/> _Rolf_ -- sumpsi - posui - clusi

Hallo heinetz, eine Flexbox brauchst Du da nur, wenn der Footer eine variable Höhe haben soll und die Einträge darin sich automatisch anpassen sollen. Das scheint hier nicht der Fall zu sein. Wenn es Dir nur darum geht, zwischen den Farbstreifen des Footers keine Lücken zu haben, in denen die Hintergrundfarbe des Footer durchscheint, dann gib den .center und .bottom Bereichen einen Blockformatierungs-Kontext. Das geht klassisch mit `overflow:hidden`, im Kommen ist auch `display: flow-root` (derzeit nur FF+Chrome). Dadurch bleiben die Margins der p und ul Elemente innerhalb des Bereichs, statt darüber hinaus zu laufen. Aber mal ANGENOMMEN, flexbox würde Sinn ergeben. Dann wäre dein CSS in folgenden Punkten optimierungsfähig: - Geh zur nächsten Webotheke und besorge Dir Semantin Forte, das hilft wirksam gegen Divitis. - Das heißt: Freunde dich mit semantischem Markup an. Verwende statt `div class='o-footer'` das footer Element. - Darin setzt Du mit h2 eine Überschrift, wenn's denn sein muss (aber nicht h1, weil die eigentlich nur einmal auf der Seite sein soll). Für die Überschrift brauchst Du keinen weiteren Container, das h2 Element kann für sich stehen. Du musst nur mit margin:0 und padding: 1em 0 (oder so) dafür sorgen, dass es vollständig gefüllt ist - wenn das denn sein muss. - Für center und bottom nimmst Du sections. Die kannst Du mit Klassen identifizieren, oder im css mit :nth-of-type(1) / :nth-of-type(2) ansprechen. WENN Du Klassen nimmst, dann nicht center und bottom, sondern benenne sie nach dem Sachzusammenhang. - Deine Breitenakrobatik wirst Du los, wenn Du `flex-wrap:wrap` durch `flex-direction:column` ersetzt. Ob Du überhaupt einen Container brauchst, außer dem footer selbst, hängt von deinen Anforderungen an die Farbgebung ab. Wenn der Footer eine andere Hintergrundfarbe haben soll als der Body und diese Farbe über die ganze Viewportbreite gehen soll, dann brauchst Du EINEN Container innerhalb des Footer. Diesen Container ernennst Du zur Flexbox. Wenn der Footer die Hintergrundfarbe des Body haben kann, machst Du den footer zur Flexbox und gibst ihm den zentrierenden Margin sowie die max-width. Es könnte auch sinnvoll sein, max-width: 82em und margin: 0 auto; an den Body zu legen, um die komplette Seitenbreite zu limitieren. Dann brauchst Du Dich auf header/main/footer Ebene damit nicht zu befassen. Aber wie gesagt, das hängt von deinen Wünschen zur Farbgebung ab. _Rolf_ -- sumpsi - posui - clusi