Full Width Containers in Limited Width Parents

Code language: CSS

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

The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.

The user resizing a browser window containing text within a fixed-width container, while the image half-way down the page resizes dynamically, bleeding out of the container, flush with the sides of the viewport at all times.

Source link

Full Width Containers in Limited Width Parents | CSS-Tricks