Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem

[Rolf B]

Hallo Günter,

möglicherweise hast Du altes CSS im Cache, bei mir wächst die Seite nicht beliebig an. Sie ist lediglich eine Prise zu breit. Lösch mal den Cache (Strg+F5 im Browser oder "Cache deaktivieren" auf dem Netzwerk-Tab der Entwickerwerkzeuge).

Die "Prise" Überbreite liegt an deiner Breitenkontrolle, die unnötig viel tut und sich mit dem Scrollbars beißt. 100vw ist - leider - das ganze Fenster und nicht Fenster minus Scrollbar. Um "Fensterbreite minus Scrollbar" zu bekommen, muss man dem Browser die Breitenkontrolle überlassen, weil Dir keiner garantiert, dass ein Scrollbar immer 17px breit ist. CSS entwickelt sich da gerade (scrollbar-gutter, scrollbar-width), das ist aber noch sehr neu.

Damit sich der body dann nicht beliebig ausdehnt, muss man bei den darinliegenden Elementen dafür sorgen, dass ihre Breite kontrolliert ist. Das ist bei Dir der Fall, dein Body ist ein Grid und das, was richtig breit werden kann, scrollt automatisch horizontal.

• Entferne vom body das width:100vw und ersetze es durch (beispielsweise) max-width:100em. Damit ist der Body so breit wie das Fenster minus Breite des Scrollbars. Und maximal 100em. Ob die 100em für Dich passen, musst Du Dir anschauen. Zusammen mit dem margin:0.5em auto passt damit die Body-Ausrichtung.
• Gib dem Body ein padding: 0 0.5em; und ein box-sizing: border-box. Ohne box-sizing würde das padding den Body zu breit machen. Das Padding macht Links/Rechts Margins für die Grid-Items des Body unnötig.
• Gib dem Body auch noch gap:0.5em (Abstand zwischen Grid-Items). Damit entfallen auch Top/Bottom Margins für die Hauptelemente der Seite.
• Entferne aus der header, nav, main, section, aside, footer-Regel die margin-Angabe.
• Entferne die width-Angabe für article, das ist ein Grid-Item, deshalb soll das Grid auch die Breite kontrollieren
• Dito für .scrolling-wrapper. Das ist ein Blockelement, das per Default so breit ist wie sein Elternelement (der article). Durch overflow-x:auto entsteht ein Scrollbar, wenn sein Inhalt zu breit wird, und er guckt definitiv nicht über die article-breite hinaus.
• Die grid-template-areas im scrolling-wrapper können weg, das schrieb ich Dir schon. Auf die beziehst Du Dich nicht. Ob grid-template-columns: repeat(24,1fr) richtig ist, bezweifle ich auch. Hier sollten Auto-Columns verwendet werden. Bzw. das ganze Grid könnte auch eine Flexbox sein, das Layout ist ja nur eindimensional.

Mit diesen Änderungen sollte schon mal nichts mehr rechts in den Scrollbar hineinragen. Und die überbreiten Scroll-Wrapper - ja, wie gesagt, möglicherweise Caching.

Rolf