einsiedler: Allgemeine Verständnisfrage: Bei zwei ineinander geschachtelten grid kollabiert/tritt das innerliegende grid herüber wenn das Bildschirmfenster zu schmal ist

Beitrag lesen

Hallo, ich habe mal eine allgemeine Frage

Ich habe folgendes html - Konstrukt:

<body>
	<header >			
		<h1></h1>		
	</header>
	<nav>
	</nav>
	<main>
		<article>
			<section>
			</section>
			<section>
			</section>
			<section>
			</section>
			<section>
			</section>
		</article>
	</main>
</body>

und gebe einmal dem body und weil ich es dort benötige jeder section ein grid mit.

Nun ist es aber so das bei einem schmalen Bildschirmfenster (sagen wir mal 31.25em) das grid der section über dem grid des body seitlich rechts heraustritt.

Warum ist das so und wie kann man das vorbeugen? Oder ist es immer so?

Bitte erklärt mir das und was ist dann am CSS eventuell falsch.

Ich bitte um Beispiele die ich dann auf meine Sache anwenden könnte.

Gruß der einsiedelnde