Full-width panels in Foundation


When I first started with Foundation, one of the things I had to figure out was how to create, or colour, a full width panel as shown in the image above. Rows, by default, are only 1000px wide, so how do I make the background colour go the entire width of the screen. There is a very simple solution to this.

The trick is to enclose your row in a div and apply the background image or background colour to that div instead of the row. Here is the HTML:

And here is the CSS: