Custom Layout Container - Resize-able Area

[#1]

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.

[#2]

smacdonald2008​ - I'm simply setting my component with a superType to 'wcm/foundation/components/responsivegrid' and creating a separate java model for my new component to account for any new properties I'll be adding.

gauravb10066713​ - The issue is less with how to achieve it from a CSS perspective, but more how can I set what gets controlled by the responsive grid. When I set the max-width on the inner responsive grid parsys, I want the grid to be set to that, as opposed the parent container, which is 100% width