Hallo
Zitatirgendwie muss es doch möglich sein innerhalb eines Content Blocks welcher eine feste Breite von sagen wir 900px hat (links und rechts also ein weißer rand sofern das Browserfenster breiter eingestellt ist) für nur einen kleinen Abschnitt aus diesem Rahmen "auszubrechen".
Dieser Grundgedanke ist falsch.
Viel sinnvoller ist es dem Content-Block (aktuell wohl das main-Element) die volle Breite zu geben und allen Abschnitten zunächst eine Breite von 900px zu geben. Einzelnen Abschnitten kann dann eine Breite von 100% zugewiesen werden. Die 100%-div bekommen dann ein "Hilfs-div" für die Breite des Inhalts.
Solche Hilfs-divs sind zwar heutzutage eher verpönt. Sie sollten aber trotzdem verwendet werden, wenn sie stabiler als andere mögliche Lösungen sind.
Für solche Fälle ist doch genau das "C" im CSS gedacht.
Spielereien mit position: absolute und negativen Werten sind in jedem Fall die schlechtere Lösung.
Das HTML könnte so aussehen:
<div class="content">
<div>
<h2>Überschrift</h2>
<p>Text</p>
</div>
<div>
<h2>Überschrift</h2>
<p>Text</p>
</div>
<div class="vollebreite">
<div>
<h2>Überschrift</h2>
<p>Text</p>
</div>
</div>
<div>
<h2>Überschrift</h2>
<p>Text</p>
</div>
</div>und das CSS dazu
.content>div,
.content>div.vollebreite>div {
background-color: hsla(180, 100%, 25%, 0.3);
width: 900px;
padding: 0.5rem;
margin: 0.5rem auto;
}
.content>div.vollebreite {
width: 100%;
padding: 0;
margin: 0;
}
.content>div.vollebreite>div {
background-color: transparent;
}So ist der Inhalt immer 900px breit, die Hintergrundfarbe von einzelnen ausgewählten div geht aber über die volle Breite.
Gruss
MrMurphy