Bootstrap 4 cards coming out of container div and overlapping next element - html

Question

I'm trying to build a responsive template with bootstrap 4 where there are three cards involved inside a container div. When changing the aspect ratio in mobile view, the cards are coming out of the container div and overlapping to the footer element outside it's container. Check my code below:
HTML:
<div class="container-fluid parallax">
<div class="d-flex justify-content-center">
<h1 class="title"><strong>Our Services</strong></h1>
</div>
<div class="parallax-row row justify-content-center">
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/web_dev_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/digital_marketing_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
<div class="parallax-cell col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="assets/images/creative_logo_service.jpg" alt="" width="350" height="200">
<div class="overlay">
<h2>header</h2>
<a class="info" href="#">Know More</a>
</div>
</div>
</div>
</div>
</div>
CSS:
.parallax {
background-image: url("/assets/images/home_services.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #ff0;
position: relative;
}
.parallax-row {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.parallax-cell {
align-self: center;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
border-radius: 5%;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
background-color: #f00;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}

Answer 1

Just do two things.
Replace .parallax-row with below.
.parallax-row {
display: flex;
justify-content: center;
align-items: center;
}
Replace .parallax-cell with below.
.parallax-cell {
align-self: center;
margin-bottom: 20px;
}
Here is running JSFiddle - https://jsfiddle.net/t4qfvmkr/

Answer 2

just need to change the property min-height to height: 100% in parallax class