container div over container-fluid div - bootstrap

        <?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @[member="link"] https://codex.wordpress.org/Template_Hierarchy
 *
 * @package bootstrapwp
 */
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <!--BOOTSTRAP CAROUSEL START-->
        <div id="carousel-wrapper" class="container-fluid">
        
        <!-- Indicators -->
        <div id="carousel-home" class="carousel slide" data-ride="carousel">
            <div class="row">   
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-home" data-slide-to="1"></li>
                <li data-target="#carousel-home" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <?php $slider = get_posts(array('post_type' => 'slider', 'posts_per_page' => 3)); ?>
                <?php $count = 0; ?>
                <?php foreach ($slider as $slide): ?>
                <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
                <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($slide->ID)) ?>" class="d-block img-fluid" alt="Responsive image"/>
                <div id="carousel-comment-box" class="container" ><?php echo $slide->post_content; ?></div>
                </div>           
                <?php $count++; ?>
                <?php endforeach; ?>
                
            </div>
        </div> <!--BOOTSTRAP CAROUSEL END-->
    </div><!--Row END-->         
    </div><!--Container-fluid END-->
    
    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

the CSS

// BOOTSTRAP CAROUSEL START//

// Carousel global START //
#carousel-wrapper
{ 
  padding:0 ! important;
  position: relative;
} 

#carousel-home 
{ 
  position: relative;
  height: auto;
}

.carousel-inner img
{ 
  padding: 0;
  height: 300px;
}

// Carousel global END //


// Carousel Comment box START //
#carousel-comment-box
{ 
    position:absolute;
    // Padding top right bottom left //
    padding: 30px 0px 30px 0px; 
    
     // Font//
    color: $color__dark;
    list-style-type: none;
    font-family: $font-family-serif;
    font-style: italic;
    font-weight:700;
    font-size: 1.8em;
    line-height: 1.4em; 
    
     @[member="Include"] media-breakpoint-up(sm) {
        @[member="Include"] make-col(4);
        @[member="Include"] make-col-offset(;
        display: inline-block;
        vertical-align: top;

    }
    @[member="Include"] media-breakpoint-down(sm) {
        @[member="Include"] make-col(12);
    }
 }
// Carousel Comment box END //

the rest of the layout is made with the normal container and I would like the text box to align with the rest. Now it takes as a reference the end of the viewport and not like the container class from bootstrap usually reacts.

is there any good idea on how to do this?

perhaps its something simple

thank you in advance