I'm currently working on the design of my website using Bootstrap, but I've encountered a small issue. I am trying to remove the unwanted space below the images. I have utilized Bootstrap classes and SCSS in my code. Although it may seem trivial, any assistance in identifying what I might be doing wrong would be greatly appreciated.
Unwanted Space Area:
https://i.sstatic.net/A3EjS.png
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 your 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;
}
}
}