And you have choosen that setting on : General Layout – Content Alignment : “Center Content”

it is just below that option where you have choosen the left sidebar header

can you mail me the link too – if you do not like to make it public

do you use WPML on that page?

see for example: https://kriesi.at/support/topic/header-structure/
and there is a link to e.g. synchronise the languages https://kriesi.at/support/topic/implementing-the-same-theme-setting-to-all-languages-using-enfoldwpml/

I think this symbol appears when an image or file cannot be found.

Edit : now i have inspected your page with dev tools – my pages with full-width easyslider and video inside as list item – looks totaly different to your DOM.

I got this <div id="mep_0" … container inside <div data-rel="slideshow-1" class="avia-slide-wrap " ….with all the video instructions inside

Ah ok : this seems to be a matter if the inserted url is a relative url and not an absolute url.
by the way it seem to be the only way to show the video on iPhones by relative urls – but than a message is shown : av-fallback-message if there is no fallback image.

so try: let there be the relative url to your video – do not enter a fallback image and:

#top .av-fallback-message,
#top .av-fallback-message + img {
  display: none !important;
}

or if you do not like to use the Sibling Combinator :

#top .av-fallback-message {
  display: none !important;
}
.avia-slideshow li img[src*="undefined"] {
  display: none !important;
}

Check what page-id is it where you do not like to show it – and then :

#top.page-id-12345 .my_title_container {
  display: none;
}

However, if you only want this feature on all pages but not on archive or post pages, for example, you can modify the snippet accordingly.

have a look if this is the default border-top of container_wrap – try:

#top .container_wrap {
  border: none !important;
}

One problem that could arise is if you have different logotypes. For example, the standard logo and alternative logo are SVG files, but the one on this page should be a PNG instead. As long as you stick to one type, there shouldn’t be a problem.

the color of the menu you can redeclared like this :
( because i do not see private content area – here with example page-id’s)

#top.page-id-44112 #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
  color: red;
}
#top.page-id-44112 #header.header_color.av_header_transparency .av-main-nav > li > a:hover .avia-menu-text {
  color: yellow;
}

you can replace the alternate logo (that for transparency) : you need to know the ID – if you replace a svg with a png file you had to know the url too of that replacement logo.
put this to your child-theme functions.php (replace the page-id and the other parameters)

function av_change_transparency_settings($header){
  if( is_page('44112') ){
	// add class to the #header for using alternate logo (It's important to leave a space at the beginning within the quotation marks.)
    $header['header_class'] .= ' av_alternate_logo_active';  
	// url of the replacement logo
    $header['header_replacement_logo'] = "/wp-content/uploads/globe-color.png";
	// the id of the replacement logo - check on media library list view
    $header['header_replacement_logo_id'] = 49022; 
  }
  return $header; 
}
add_filter('avf_header_setting_filter','av_change_transparency_settings');

setting that extra class av_alternate_logo_active is not needed if you have a standard transparency logo set on enfold options.
maybe: you had to set some extra css for png logo on width and height on responsive case

see example page here: https://webers-testseite.de/bg-video/

PS: you see on my other pages (f.e. the landing page/home) of that example installation – that i do not use the transparent logo. Because i use svg files – i can fill the letters differently for transparent header. That is the reason why i had to add that extra class on that example page.

first – on your page – there is no need for using the grid-row element.
A grid-row element is a nice way to accomplish complex nested column layouts.
With your 3 columns only you can do it that way on your page above.

My snippet is only using on custom class to convert a full-width grid-row to a “layout element” that has its content inside the default container width.
https://webers-testseite.de/layout-mimic/

but you have activated that option on enfold settings:

theme editor – where ? you can not edit your child-theme functions.php ?
or theme editor – on editing pages/posts?

But that can’t be related to the code snippet from my site. –
I’m Participant as you are so you’ll have to ask a mod here if they can take a look at your installation.

by the way i will update that installation now to newest enfold – to check if there are things to change …

hier ein paar mehr css Setzung als du wahrscheinlich benötigst – lösche einfach was du nicht benötigst:

#top .avia_message_box {
  /* text-align: left !important; */
  padding-top: 30px;
  hyphens: auto;
}

#top .avia_message_box p {
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em
}

#top .avia_message_box .avia_message_box_icon svg {
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  top: 5px;
}

Oh, sorry. Since I work with a German user interface, I didn’t think about this progress bar (Fortschrittsbalken). The “Reading Progress Bar” isn’t translated in my German version, but the progress bar element is. That’s why it didn’t occur to me.

Yes background-color is better set on that options dialog of the Element. But you had to open the second popup for each item (bar) there is the background-color option.
__________

And just to mention – you can have gradients on that too by css
f.e. for the first bar in your element:

#top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {
  background-image: linear-gradient(90deg, rgba(255, 255, 0, 1) 0%, rgba(0, 188, 212, 1) 50%, rgba(238, 130, 238, 1) 100%);
  background-size: contain;
  animation-iteration-count: 1;
}

see https://webers-testseite.de/#marketshare

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

by the way there is one obsolete curly bracket in your snippet!

try instead:
(if you do not need it on checkout page etc. – adjust the conditionals)

function widget_area_above_footer_woocommerce() {
    // Check if we are on a WooCommerce page.
    if ( class_exists( 'WooCommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
        // If it's a WooCommerce page, display the widget area.
        dynamic_sidebar( 'footer-widget' );
    }
}
add_action( 'ava_before_footer', 'widget_area_above_footer_woocommerce' );