Hi Arun,
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'


.cmp-container{
.cmp-container__content{
&.responsivegrid.aem-GridColumn.aem-GridColumn--default--12{
@media (min-width: $screen-sm-min) {
max-width: $container-sm;
}
@media (min-width: $screen-md-min) {
max-width: $container-md;
}
@media (min-width: $screen-lg-min) {
max-width: $container-lg;
}
margin:0 auto;
}
}
}