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');

Well the logo itself is place as inline svg. But nevertheless – you can handle it like an image – and influence the space arround that svg with padding.

in the footer there is a img tag with svg

so try:

#top .logo.avia-svg-logo svg {
  padding: 5px;
}

@media only screen and (max-width: 767px) {
  #footer-page .flex_column.first .avia_image {
    max-width: 180px;
    left: 50%;
    transform: translateX(-50%);
  }
}

ok – if you like to have on default a sidebar header – and on homepage only the header top position.
( for that scenario we need than a bit different css too if you like to have slide-out from left to right)

1 set your enfold child to header top and make all your decisions you like to have for that header ( height, logo left or right, navigation position, shrink or not, etc pp )

2 Go to your homepage editor and make your decision there – f.e. if it should have transparency etc.

3 Look now to your homepage with dev tools of your browser. Note your ID of that page and look what classes are set on #header
e.g.: ( all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled )

4 now switch back to your header left position.

put this to your child-theme functions.php:

(remove options you do not need – or replace – f.e. header_size and header_custom_size and replace by header_size: ‘slim’ / or large )
you can find those corresponding header settings in : avia_header.php

function av_change_header_style($header){
  if(is_page(array( 17, 123456))){ 
    $header['header_position']    = "header_top";
    $header['header_layout']      = 'logo_right main_nav_header menu_left';
    $header['header_size']        = 'custom';
    $header['header_custom_size'] =  140;
    $header['header_shrinking']   = 'header_shrinking';
    $header['header_sticky']      = 'header_sticky';
    $header['header_unstick_top']   = 'header_unstick_top';
    $header['header_stretch']     = 'header_stretch';
    $header['header_transparency']  = 'header_transparency header_glassy';

    $header['header_class'] = " all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled";
  }
  return $header; 
}
add_filter('avf_header_setting_filter','av_change_header_style');

here in this example there are two pages (ID’s) replaced with that different layout – adjust to your home page ID
this filter has a lot more options. Enter on $header['header_class'] your noted classes from point 3.

see example page: https://clean.webers-testseite.de/

well you got a page like this for your layout: https://kriesi.at/themes/enfold-photography/

try:

@media only screen and (max-width:767px) {
  #top .av-logo-container .inner-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nav logo";
  }

  #top .av-logo-container:after,
  #top .av-logo-container .av-sidebar-social-container {
    background-color: gray;
  }

  .responsive #top #header .logo {
    grid-area: logo;
    width: unset !important;
    justify-self: end;
  }

  .responsive #top #wrap_all .main_menu {
    grid-area: nav;
    justify-self: start;
    width: unset !important;
    left: 0;
    right: unset;
    position: relative;
  }
}

/* === change the width values to your needs f.e. 500px instead of 350px  === */
/* === burger slide-out from the leftside === */

.av-burger-overlay-scroll {
  width: 350px;
  left: -350px;
  max-width: 100%;
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

.html_av-overlay-side .av-burger-overlay-scroll {
  left: 0;
  max-width: 100%;
  transform: translateX(-350px);
  transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
}

/* === hide header on home page === */

@media only screen and (min-width:768px) {
  .html_header_sidebar #top.home #header {
    display: none !important;
  }

  .html_header_left #top.home #main {
    margin-left: -2px !important;  /* === to ensure there aren't any white flashes on the left  === */
    position: relative;
  }
}