Frage zu Flexibles Layout

[Maetzzen]

Hallo zusammen,

ich möchte gerne meine Website mobiltauglich(er) gestalten. Bisher habe ich alles mit Größenangaben in px zusammengehalten. Für mich anfangs leicht verständlich und das einzige, das mir bekannt vorkam :) Jedoch sei das nicht die optimalste Lösung um die Seite bei verschiedenen Viewports leserlich darzustellen. Ich habe mich bereits zu den Themen Viewport und Flexbox eingelesen und bin dabei auf das Flexbox-Beispiel mit drei Spalten gestoßen. Da es mir sehr schwer fällt meine Website - die mehr oder weniger durch code&fix entstanden ist - umzukrempeln, habe ich einfach dieses Beispiel zum testen eins zu eins übernommen. Schließlich muss ich das Flexible Layout erst ein mal verstehen, bevor ich meine Seite umbaue.

Jedoch war ich ein wenig verwundert, als ich das von mir modifizierte Beispiel aufgerufen habe.

So wird das o.g. Original-Beispiel bei mir dargestellt. "Das Wichtigste" befindet sich zentriert in der Mitte, an beiden Seiten sind weiße Balken.

Und so sieht das Ganze aus, wenn ich "meine Datei" im Localhost oder auf meiner Website ansehe. "Das Wichtigste" wird über die ganze Breite, ohne weiße Balken, angezeigt. Es handelt sich um denselben Code, selber Browser, selbe Einstellungen (viewport, zoom).

1. An was genau liegt das?

2. Wie genau kann ich den Code aus o.g. Beispiel so ändern, dass bei breiten Bildschirmen an den Seiten "freie Balken" sind?

Bisher habe ich meinen Wunsch "Seiteninhalt zentriert in der Mitte der Seite darstellen" immer folgendermaßen erfüllt:

html{
width: 50%;
margin: auto;
}

oder

html{
width: 1000px;
margin: auto;
}

Dies möchte ich gerne beibehalten, jedoch nur bei "großen" Bildschirmen. Die Seite soll also bei breiten Bildschirmen nicht ins weite horizontale wachsen, sondern zentriert und kompakt in der Mitte des Bildschirms bleiben.

3. Kann ich das in etwa so umsetzen?:

@media all and (min-width: 80em) {
    html{
        width: 70%;
    }

Ich hoffe ich habe meine Frage verständlich formuliert. Gerne liefere ich auch mehr Informationen, falls nötig.

Ich bedanke mich schon mal im Voraus für eure Antworten :)

Gruß Maetzzen