The simplest way to set the maximum page width for your website is to put all your content inside a containing row.
<body> <div id="container" class="row"><div class="large-12 column"> <!-- website content --> </div></div><!-- end #container --> </body>
This code creates an outside row with a maximum width equal to the max-width value of the row (the default value is 62.5 em or 1000 px).
As a general rule, while creating an outer containing row, always include a column that has the full width (for example, large-12 columns). Otherwise, the negative margins of an inner row will make your website wider than you anticipated.
Only the outermost row has a specific maximum width value. Inner rows expand to fill the container in which they reside.
While having a single containing row is the simplest way to set the maximum width for your site, you can also build your site in sections. In the blog we created earlier, we had an outside row for each of the three sections: header, main, and footer.
This also works to keep your site at a fixed maximum width. As long as all the content is within those rows, the content will align itself, and the site width will be limited to the maximum width for the outer row class in Foundation.
To override the maximum width of your site in a custom style sheet, simply add a style as follows:
.row { max-width: 128em; }That's it. Now your outer rows, and therefore your site width, will use as much as 128 em (2048 px). Choose your own maximum width, larger or smaller than the default 62.5 em.