Row in bootstrap

Question

Why when i use bootstrap's row class my frame overflow compared to parent class? And how can I handle it? Here 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%;
}

I understand it is due to margin-left/right: -15px attribute of row in bootstrap but is there any way I can solve it but still use row, col for responsive

Answer 1

You can use mx-0 class. Here is the example

.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%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="content-title">
    <div class="row mx-0">
        <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>