One thing I am trying to accomplish, however, is the ability to have the background color/image of the Container component span 100% the width of the page, but constraining the content area to 1200px, along with the Layout grid.
The top image is just setting the content area to 1200px, but doing that does not constrain the grid. Only by placing another container inside of that max-width:1200px content area is the Layout grid constrained.
OOTB, the CSS rules for Grid are written, if we add components inside a responsive grid then only CSS rules will be applied to set the width. You can update or write rules to apply the same within the container as well.
The problem with the Container seems to be that in order for the background to extend 100% of the page, the Container component itself needs to do the same, and since the root layout container is controlling how the grid gets laid out, the grid overlays on the Container, at 100% the width of the page. Any time I try to override, it does not take the changes. See screenshots. As you can see, I want the Grid to be overlayed on the 'cmp-container__content' div and not 'cmp-container'