Non-fullwidth Portfolio or Grid Row gets colored sides

a pure css solution is perhaps not possible.

i have my snippet for 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');

what you had to do: give a custom class to the grid-row element: grid-notfull
see: https://webers-testseite.de/grid-row-alb/

the difference between green color-section to following grid-row on my testpage comes from the standard padding of grid-cells of 30px

PS: the ID of the grid-row element goes to its wrapper as class.

You’re talking about the grid row element, right?

Edit: sadly you did not post a link to your page – but your screenshot is clear enough – i found your site now.
Because it looks exactly the same when you set a grid-row by css to to be not full-width, I thought you had used this element.

____________

So – why don’t you put the portfolio grid inside a 1/1 Container
The Color-Section can have the one background-color – and the 1/1 Container a different one.

if you then do not want on top and bottom of the 1/1 Container the background-color of the Section just remove padding-top and padding-bottom of 50px.