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.)

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:

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.
​

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.

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: