Bounded Content
The Bounded Content component is used to constrain the width of your page content. It puts a maximum width on that content, and puts in a small amount of horizontal spacing to keep the content from touching the edges of the browser window.
Most pages will want to place any content between header and footer inside of a Bounded Content component. Any content that should span the full browser window, such as hero zones, should go outside the Bounded Content.
Hero might stretch to the edge of the screen (the screen is shown by the black border)
Page content has some spacing on the sides, and a max width if the screen is really big
jsx
<BoundedContent>Grid content goes here</BoundedContent>
<div class="bounded-content"><!-- does not have to be a div tag --><!-- grid container(s) go here --></div>