This is difficult for me to articulate, so I'll do the best I can.
I want to extend the layout component to add some additional properties (BG color, ability to provide an anchor, etc). The tricky part I am running in to is I want the component to extend 100% of the viewport, but the inner content to have a max-width. However, I want the responsive grid to only be contained within that max-width, and not the width of the entire component. I've illustrated it the best I could in the attached screenshot.
The entire layout component is the red background, but the text component inside, which is conforming to the max-width, is bound to the layout's 100% width grid. I would like for the grid to be contained inside of the 2 black lines.
Live demo example of multiple layout containers: Pinnacle Finance (view the source and search for the class fsi-container--highlight to find the outer layout container and cmp-layout-container--fixed for the nested fixed width layout)