Row in bootstrap-CodePudding

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 >
<div >
                <div >
                    <div >
                        <img src="" alt="">
                    </div>
                    <div  ></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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
  <div >
    <div >
        <div >
            <img src="" alt="">
        </div>
        <div  ></div>
     </div>
  </div>
</div>