CSS: How to force objects to stay inside container but allow full width background? [duplicate]
This question already has an answer here:
I want objects in header and footer to stay inside the fixed width container, but allow header and footer to have background color filling full width of browser window. How do I do that?
Don't try to make the area represented by the red lines in your diagram a single element.
For each block:
- Set the background on a full width element.
- Put a width constrained element inside it.
- Put the content in the width constrained element.
Consider using a class to describe the constrained width element so you can reuse its CSS for each of the three blocks you have.