Huge Space Below Two Rows in Bootstrap

Question

I am making design of my site in bootstrap.I am stuck at this small issue.I want to remove the unwanted space below the images.I am using bootstrap classes and scss.I know this is a very small issue but it will really save my time if someone correct me what i am doing something wrong.Just a little help required.

Unwanted Space Area:

Bootstrap Code:

 <section class="homepage-banner-section">

            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4">
                         <div style="height: 67%;">     
                            <img src="img/home-banner-one.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                         </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            <div class="col-12">
                                <div class="therapy-text-wrapper">
                                    <h2 class="therapy-text text-center">Start you therapy now!</h2>
                                </div>
                            </div>
                            <div class="col-12">

                                <div style="height: 60%;">  
                                    <img src="img/home-banner-two.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="anxiety-text-wrapper">
                            <h2 class="anxiety-text text-center">Anxiety is very common:<br>
                            worldwide 1 in 14 people <br>
                            have disabling anxiety.</h2>
                        </div>
                    </div>
                </div>
            </div>

        </section>

SCSS :

.homepage-banner-section{

    padding-top: 2%;

    .therapy-text-wrapper{

        .therapy-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper{
        text-align: center;
        padding: 2% 0;

        .anxiety-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}

Answer 1

The image positioning is messing with the div heights you have here. You can try adding a margin-top: -100px; to your anxiety section to bring it up.

SASS:

.homepage-banner-section {

    padding-top: 2%;

    .therapy-text-wrapper {

        .therapy-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper {
        margin-top: -100px;
        text-align: center;
        padding: 2% 0;

        @include media-breakpoint-down(md) { 
            margin-top: -10px; 
            // Change or disable the margin here for anything smaller than a medium screen
        }

        .anxiety-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}