Boxed content in grid row with fullwidth background

it is always better to see a page than a screenshot.
if you got a grid-row – you can force it to be the same way as a normal container.
I use this often when i want to have nested containers.

give to the grid-row a custom class: grid-notfull
do this to your functions.php of your child-theme:

function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

you have to adjust this line to your settings:
$('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
( the padding depends on the inner padding of the grid cells (on default it is 30px – so to come to the 50px left right … )
you see what it does: it wraps the grid-container with a div that has the attributes of a color-section.
it has on that the background-color on default from main_color – you can overwrite that with css