Grid width, color outside of left and right grid margins

you have set this css rule to not have the full-width of the grid element.

#av-grid-custom-home {
  max-width: 960px;
  margin: 0 auto;
}

the quick and dirty way is to set the background-color to your #f3f3f3 – but it influences the whole installation.

#top #main {
  background-color: #f3f3f3;
}

__________________

so remove your setting from above …

A more flexible approach is to wrap the grid-row element in a div that has all the properties of a standard color-section.

set a custom class on those grid-row element : grid-notfull
now to get a not fullsize grid-row element i have the following snippet in my child-theme functions.php :

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('.av-layout-grid-container.grid-notfull' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');