@mixin full-width {
width: 100%;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The idea here is:
1. push the container to the exact middle of the browser window with left: 50%
2. pull it back to the left edge with negative -50vw margin
https://css-tricks.com/full-width-containers-limited-width-parents/