How to add green box under image slider in wordpress?

Question

I have a wordpress site and I am using the spacious theme. And what I want to archive is just a green box under de image slider. So the code of the image slider is like this:

<section id="featured-slider">
   <div class="slider-cycle" style="height: 465.922px;">
   <nav id="controllers" class="clearfix">
      <a class="active"/>
      <a class=""/>
      <a class=""/>
      <a class=""/>
      <a class=""/>
   </nav>
   <div class="slides displayblock cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
   <figure>
   <img class="lazy loaded" width="1500" height="655" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-was-processed="true">
   </figure>
   <div class="entry-container">
   <div class="clearfix"/>
   <a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/doe-mee-2/" title="">Doe mee</a>
   </div>
   </div>
   <div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;">
   <figure>
      <img class="lazy loaded" width="4950" height="2162" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-was-processed="true">
   </figure>
   <div class="entry-container">
      <div class="clearfix"/>
         <a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/steun-ons/" title="">Steun ons</a>
      </div>
   </div>
   <div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;">
   <figure>
      <img class="lazy loaded" width="4350" height="1899" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-was-processed="true">
   </figure>
   <div class="entry-container">
      <div class="clearfix"/>
         <a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/" title="">Verbind op locatie of thema</a>
      </div>
   </div>
   <div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;">
   <figure>
      <img class="lazy loaded" width="4799" height="2095" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-was-processed="true">
   </figure>
   <div class="entry-container">
      <div class="clearfix"/>
         <a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/word-lid/" title="">Word lid en één van ons</a>
      </div>
   </div>
   <div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;">
      <figure>
         <img class="lazy loaded" width="4200" height="1834" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-was-processed="true">
      </figure>
      <div class="entry-container">
         <div class="clearfix"/>
            <a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/evenementen/" title="">Evenementen &gt;&gt;&gt; agenda</a>
         </div>
      </div>
   </div>
</section>

And I try it with css like this:

#featured-slider img {
 border-bottom: 70px solid  #72BF44;
  width: 1067x;
  height: 466px;
}

But this is not the correct way. Because the images are transforming. And also the greenbox takes space from the images.

And I also want to have some text in the green box.

So I have added a image how it have to look like.

With the text in the green box. And I am using the Guttenberg layout for editing the pages.

if I do it with the option: "Custom HTML" in the Gutenberg page.

It already looks better. But how to make this full width. Like the images above?

There is a class inner-wrap:

<div class="inner-wrap">
<div id="primary">
<div id="content" class="clearfix">
   <div style="background:#72BF44;height:70px;width: 100%;"></div>
</div>

with the css:

.inner-wrap {
    width: 94%;
}

.inner-wrap {
    margin: 0 auto;
    max-width: 1218px;
}
 

So how to overrule the inner-wrap, so that the greenbox has the full widht of the images?

Answer 1

Add an "Custom HTML" block with this content:

<div style="background:#72BF44;height:70px"></div>