The text stays inside of the max-width of the .container parent, but has full-width background.
One solution to the problem of needing to create full-width backgrounds on some content that you want to be inside of the max-width column.
The text stays inside of the max-width of the .container parent, but has full-width background.
Browsers need to support transform and vw units, roughly IE9 and upwards.
Similar effects can be achieved with Dave Rupert's method. His code relies on using :not, which also means browser compatability IE9 and upwards.
Another and more modern way would be to usse this example with CSS Grid, however just for the most modern browsers so maybe not ready for the average production project just yet.