Hallo MrMurphy,
Die Probleme fangen bereits beim HTML-Quelltext an. Wenn dort gravierende Fehler oder unsinnige Konstruktionen auftreten kann das CSS nicht funktionieren.
Ich habe mal einen Validator drüberlaufen lassen und die paar Fehlerchen ausgebessert, die er meldete. Wenn da also noch was im argen liegt, bitte ich um einen konkreten Hinweis.
Kurz: Dir fehlen die Grundlagen.
Ach, ich hielt mich eigentlich für durchaus bewandert. :-)
Von daher muss zunächst dein HTML-Quelltext so überarbeitet werden, dass der einerseits fehlerfrei den Regeln von HTML5 entspricht und andererseits Flexbox sinnvoll darauf angewendet werden kann. Vorher brauchst du dich mit dem CSS / Flexbox / Responsive Design überhaupt nicht beschäftigen.
Laut Validator ist er jetzt fehlerfreies HTML5. Für die Anwendung von Flexboxen habe ich ihn bereits in den Tagen vorher schon ordentlich umstrukturiert, u.a. auch auf Basis des SelfHTML-Beispiels. Es sei denn, natürlich, dieses Beispiel ist nicht sinnvoll für Flexboxen geeignet.
Du solltest dir die Seite auch mal im IE anschauen. Ich habe selten Seiten erlebt, die sich im FF, Chrome und IE11 so sehr unterscheiden.
Kein IE da. Es gibt auch andere Betriebssysteme als Windows. Darüberhinaus bin ich der Auffassung, dass eine Seite standardkonform zu sein hat, damit sie in standardkonformen Browsern ordentlich angezeigt wird. Wenn sie das gerade nicht tut, obwohl ich nach bestem Wissen und Gewissen die Seite standardkonform geschrieben habe, dann ist das für mich Anlass die Hilfe derer zu suchen, die das besser können. Womit wir bei dem Grund sind, weswegen ich hier bin.
BG aus B-Lichtenberg
Masin