why my <div></div> is overlaying on another div on small screen - css

Question

Whenever I check the responsiveness and check it on the small screen my one div starts overlaying another div. I have tried the ```position : relative and overflow: hidden as well but it makes no sense call you please tell me what I have to do to stop it from being overlaying another div
my HTML code is :
<div class="container-grid">
<div class="grid_upper">
<h1 class="grid_Heading">My recent projects</h1>
<div class="grid_para">
Ask me a Question if you are unable to solve it.
</div>
</div>
<div class="cardContainer1">
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1074239826-170667a.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card </h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1272685152-612x612.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./photo-1473090826765-d54ac2fdc1eb.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-4">
<div class="card h-200">
<img
src="./creative-book-cover-design-vintage-260nw-1115305040.webp"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm-8" style="background-color: white;">
<div class="card card2 h-200" >
<img style="width: 100%;"
src="./wide-view-image-young-woman-paddling-sup-board-calm-morning-sea-water-rear-view_254268-2063.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer laster">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2_laster">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text" style="color: black;"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Approach">
<div class="app_head">
<h1 class="main_approach_Heading">My approach</h1>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no1">1</h1>
<div class="card-body">
<h5 class="card-title">We will sit and talk drinking coffee</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no2">2</h1>
<div class="card-body">
<h5 class="card-title">We will sketch some ugly Frameworks</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer approach_footer">
<div class="app_circle"> </div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no3">3</h1>
<div class="card-body">
<h5 class="card-title">You will pay alot for my services</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the CSS code is :
.grid_upper {
display: flex;
flex-direction: column;
width: 67%;
margin: auto;
}
.grid_Heading {
font-size: clamp(2em, 2.5vw, 7em);
padding: 0.5em 0.21em 0em 0em;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.grid_para {
color: white;
}
.container-grid {
display: flex;
position: relative;
height: 160vh;
overflow: visible;
flex-wrap: wrap;
background-color: #3e4245;
}
.cardContainer1 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.cardContainer2 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.card {
background-color: #252728;
border: none;
border-radius: 20px;
height: 100%;
}
.card2 {
background-color: white;
}
.card2 .card-title {
color: black;
}
.card2 .card-text {
color: grey;
}
.card-title {
color: white;
}
.card-text {
color: rgba(255, 255, 255, 0.522);
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255, 255, 255, 0.522);
background-color: #252728;
/* background-color: red; */
margin: none;
border: none;
}
.card_text_1 {
color: rgba(255, 255, 0, 0.659);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
.shortImg {
height: 40px;
width: 40px;
border-radius: 50%;
}
.footerNo2 {
display: flex;
align-items: flex-start;
justify-content: flex-start;
/* flex-direction: column; */
padding: 1em 1em;
/* background-color: aqua; */
}
.footerNo2_laster {
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: white;
}
.FooterInsideContainer {
display: flex;
flex-direction: column;
padding: 0em 1em;
}
.laster {
background-color: white;
}
.laster .card_text_1 {
color: skyblue;
}
.Approach {
position: relative;
/* overflow: hidden; */
height: 100vh;
width: 100%;
margin-top: 10em;
}
.app_head {
padding: 7em 5em;
display: flex;
font-weight: bold;
/* background-color: red; */
}
.main_approach_Heading {
font-size: clamp(1.5rem, 10.5vw, 4rem);
font-family: "Roboto", sans-serif;
margin: auto;
text-align: center;
}
.pic_char {
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* margin-top: 200px; */
text-align: center;
font-weight: bold;
text-transform: uppercase;
/* font-family: 'Times New Roman', Times, serif; */
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
.no1 {
background-image: url("./istockphoto-1288917639-170667a.jpg");
font-family: "Montserrat Alternates", sans-serif;
font-size: 13em;
}
.no2 {
background-image: url("./polygonal-square-background-black-blue-purple-vector-21357114.jpg");
/* font-family: 'Anton', sans-serif; */
font-size: 12em;
}
.no3 {
background-image: url("./android-marshmallow-6-hd-orange-yellow-and-gray-blocks-illustrarion-wallpaper-preview.jpg");
font-size: 12em;
}
.Approach .card {
display: flex;
background-color: white;
color: black;
/* width: 50%; */
}
.Approach .card-body {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
padding: 0em 4em;
/* background-color: pink; */
}
.Approach .card-title {
color: black;
font-weight: 700;
font-size: 1.4em;
font-feature-settings: "vrt2";
}
.Approach .card-text {
color: grey;
text-align: center;
}
.approach_footer {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: grey;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
.app_circle{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}