But you do not use it now?

See first if this is a nearby solution: https://enfold.webers-webdesign.de/

ok – here is a quick solution (with AI support).
Enfold has the hook where you can insert something directly after the body opening tag. So put this to your child-theme functions.php:

function ava_custom_jalousie_loader() {
?>
<script type="text/javascript">
	window.addEventListener('load', function() {
		document.body.classList.add('loaded');
	});
</script>
<?php
}
add_action( 'wp_footer', 'ava_custom_jalousie_loader' );

add_action('ava_after_body_opening_tag', function() {
  echo '<div id="preloader-wrapper">';
    echo '<div id="jalousie-preloader">';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
    echo '</div>';
  echo '</div>';
});

if you want less amount of jalousie-slat – remove some divs

now the css:

#preloader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    perspective: 1000px;
    overflow: hidden;
}

#jalousie-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transform-style: preserve-3d;
}

.jalousie-slat {
    width: 140%;
    position: relative;
    left: -20%;
    flex-grow: 1;
    background-color: #222222;  /* === change to your color you like === */
    transform-origin: 50% 50%;
    transition: transform 0.8s linear, opacity 0.4s linear 0.4s; 
    backface-visibility: hidden;
    transform: rotateX(0deg);
    opacity: 1;
    box-sizing: border-box;
}

body.loaded #preloader-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0.8s, visibility 0.3s 0.8s;
}

body.loaded #jalousie-preloader .jalousie-slat {
    transform: rotateX(90deg) scaleY(0.01);
    opacity: 0;
}

see here a better snippet that splits first into words then into chars:
https://webers-testseite.de/split-words/

until the bug is fixed – just re-enable the LayerSlider plugin:
Enfold (child) – Layout Builder – Integrated (bundled) LayerSlider plugin …

if you got that snippet inside your functions.php : add_theme_support('deactivate_layerslider');
remove that too.

this (huge padding left/right) is not the best method to restrict the content width; because what would you do on mobile?
There are settings on the column element itself to rule those settings for smaller screens. But – none of them is seen in the DOM – inspecting that page with dev tools.

now here is a pre question to be clear. After setting up your background-color on color-section – and the padding on 1/1 column :
Did you always complete the corresponding entries at the bottom of the element with “save” before you saved the page?

#top.page-id-918 #av_section_7 {
  background-color: #7bb0e7;
}

#top.page-id-918 #av_section_7 .flex_column.av_one_full {
  padding: 0 150px;
}

And btw. on all your other color-sections and 1/1 columns you do not have there a padding of 0 150px
The width is determined by manually set line-breaks !

see here my test page: https://webers-testseite.de/

my code to have a fixed header on mobile first – then after scroll a header with background-color:
because i do not see your page – the values ( of height / line-heigt etc. had to be adjusted ) – and I can give no better advice.
if your breakpoint is at 767px – change the media-query.

@media only screen and (max-width: 989px) {
    .responsive #top #wrap_all #header .container {
        width: 95%;
        max-width: 95%;
    }

  /* === values depends on if header_meta is present (80px + 35px) === 35px is the min-height of header_meta */
  #top #header {
    position:fixed !important;
    height:115px !important;
    max-height:115px !important
  }

    #top #header.av_header_transparency #header_meta {
        background-color: transparent;
    }

    #header_main {
        border-bottom: none;
    }

    #header:not(.av_header_transparency) #header_main {
        box-shadow: 0 5px 10px #eee;
    }

    .responsive #top .av-logo-container ,
    .responsive #top .logo a,
    .responsive #top .logo img,
    .responsive #top .logo svg {
        height: 80px !important;
        max-height: 80px !important;
        line-height: 80px !important;
    }

    .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 80px !important;
        line-height: 80px !important;
    }  

    .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
        background-color: transparent !important;
    }

    #top .header_bg {
        background-color: transparent !important;
    }

    #top #header:not(.av_header_transparency) .header_bg {
        background-color: #FFF !important;  / *** change to your needed bg-color *** /
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
    }

    /*** if you got header_meta ***/
    #top #header.av_header_transparency #header_meta .phone-info * {
        color: #FFF !important;   / *** change to your needed bg-color *** /
    }

    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
        background-color: #FFF;  / *** change to your needed bg-color *** /
    }
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
        color: #FFF;  / *** change to your needed bg-color *** /
    }
    .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
        padding-top: 80px !important;
    }
    .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
        padding-top: 0 !important;
    }
}

there might be some rulesets not neccessary for your setting – but as mentioned above your page is in maintainance mode.

By the way – most modern browsers support the pseudo-state: focus-visible
This is a good way to design keyboard navigation – because the normal handling of events by hover or click is not affected.

sorry i did not read the whole text here on that topic; but if i see something with inline-svg : did you have any css rule managing the width or height of svg’s ?

__________________
so this might be offtopic – but that was one reason why some of my svg icons seems not to be in place

On former installations of mine – i use a snippet to convert all img tags that are svgs to inline svgs. those svg’s that do not have a width and height definition inside the svg code ( only viewport settings ) need an absolute width to be shown. Otherwise these svgs are listed as 0x0 dimension.
For those svgs i have set in my quick css a rule like:
#top #main svg {width: 1500px}
with those new svg icons we have on iconbox.css this rule:

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em;
  width:1em;
  margin-top:3px
}

so my setting for inline svgs is more selective – and wins the game!
to avoid that :

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em !important;
  width:1em !important;
  margin-top:3px
}

As i mentioned above – and Mike pointed out again – there are a lot of manual set linebreaks (<br>)
but if you like you can force a max width of the p-tags by font length units one of the modern one is ch (The width of the 0 character of the font in use) so – 110ch means nearly 110 characters. A more common font unit is em (The font size of the element, or its nearest parent container)

I would not recommend this procedure; I would probably rather limit the container itself there, but so that you can see that it also works via css:

#top .avia_textblock p {
  max-width: 110ch;
  word-wrap: break-word;
  margin: 0.85em auto 0;
}

can you show me the page – it is hard to find the right selectors without the example page.

try :

#top #searchform.av_disable_ajax_search  #searchsubmit {
  right: auto;
  left: 8%;
}

#top .cn-page-heading-container #searchform {
  background-color: #FFF;
}

#top .cn-page-heading-container #searchform > div {
  max-width: 320px;
  display: block;
  margin: 0 50px;
}

#top .cn-page-heading-container #searchform  #searchsubmit,
#top #avia-menu #searchsubmit,
#top #searchform #searchsubmit {
  right: 0px !important;
  left: auto;
}

and have a look to your search page itself – if this is o.k. for you too!
see : https://riseandshine.childrensnational.org/?s=web

well it is the same setting – but you placed on the other textblocks manual breaks:

see:
(click to enlarge the images)

and because of text-align: center – these phrases are not the full width:

see: https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481874

it does work on dev tools – so either it had to set something to !important or to have on a selector a higher specificity.

Try:

@media only screen and (max-width: 767px) {
  .responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 20px !important;
    width: unset !important;
  }
}