Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html:
<div class="container">
<div class="content-title">
<div class="row">
<div class="img-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img src="" alt="">
</div>
<div class="detail-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
</div>
</div></div>
Css:
.content-title {
width: 100%;
height: 392px;
background: red;
box-shadow: 0px 16px 48px rgba(47, 57, 152, 0.08);
border-radius: 40px;
}
.content-title>div{
height: 100%;
width:100%;
}
.img-content-title{
border-radius: 28px;
border: 1px solid;
height: 100%;
}
.detail-content-title{
border-radius: 28px;
border: 1px solid;
height: 100%;
}
Is there a way to solve the overflow issue caused by the margin-left/right: -15px attribute of the row in Bootstrap while still maintaining responsiveness with row and col classes?