At the top of the design studio UI, just below the contextual toolbar, you'll see a ruler:

This represents the maximum width of your website -- not just the current page you're viewing, but the entire site.

The content of your website will not get any wider than this amount, unless you've specifically styled elements on the page to do so (see "Max-Width and Page Elements" below.)

Changing the Maximum Site Width

By default, the max-width is set to 1160px. If you want to adjust this, you can do so by grabbing one of the blue arrows at either side of the ruler, and dragging it:

For more precise control, you can also use the Global Styles Panel to set the maximum width of the website. Select "Website", then select the "Dimensions" tab:

Obviously, changing the maximum width of your website can have a dramatic effect on its layout, so be careful! It's usually best to select your max-width at the beginning of your project, before you actually start designing.

Website Max-Width and Element Width

When you place a new element on the page, its width is set to 100% by default, which means it will automatically expand to the current max-width of your website:

However, if you want, you can still style any element to exceed the website's max-width by manually adjusting it, or by using the Dimensions Panel.

Website Max-Width and Element Backgrounds

The Box Fill tool (available in the contextual toolbar, and in the Dimensions Panel) will also allow you to choose whether you want an element's background to extend to the full width of the website, or the full width of the browser window

By default, an element's background will extend to the full width of the browser:

By toggling the box fill mode, you can limit an element's background so that it only extends to the full width of the website:

Did this answer your question?