Einzelne Elemente aus Container (Wrapper) ausbrechen lassen

In Layouts wird der Inhaltsbereich gerne in einem Wrapper bzw. Container in der Breite begrenzt und zentriert. Bei Bootstrap zum Beispiel mit der Klasse .container. Allerdings sind so alle Kindelemente ebenfalls in der Breite begrenzt. Möchte man einzelne Elemente (z.B. ein Hero-Slider) trotzdem auf 100% der Fensterbreite bekommen, ohne auf die Begrenzung für alle anderen Elemente zu verzichten, ist folgendes CSS-Snippet sehr hilfreich:

.edge2edge {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Die Klasse .edge2edge kann dann auf alle Elemente gesetzt werden, die aus dem Wrapper „ausbrechen“ sollen.