如何让子div与父div宽度一致？已尝试常见方案仍有边距

我给父div设置了max-width: 100%（期望全屏宽度），想让子div和它宽度完全一致，但试过给子div设置width: 100%、width: inherit，还有Bootstrap的ms-0、me-0类，子div还是有边距。父div上方有轮播组件，而且父div本身没有浏览器默认边距，试过相关方案都没解决。

原CSS代码 #

.main {
  position         : relative;
  height           : auto;
  left             : 0px;
  right            : 0px;
  background-color : #eceaed;
  max-width        : 100%;
}
.middle-box {
  position         : relative;
  height           : 250px;
  max-width        : 100%;
  border           : 1px solid black;
  background-color : rgba(96, 75, 254, 0.8);
}
.middle-box::before {
  content          : "";
  background-image : url("../images/mountains2.jpg");
  background-size  : cover;
  position         : absolute;
  top              : 0px;
  right            : 0px;
  bottom           : 0px;
  left             : 0px;
  opacity          : 0.3;
}

原HTML代码 #

<div class="container main">
  <!-- 此处是轮播组件的div -->

  <div class="container middle-box ms-0 me-0">
  </div>
</div>

解决方案 #

问题根源是父、子div都使用了Bootstrap的container类，该类默认带有左右内边距，且子div的预设max-width限制了宽度表现。调整CSS如下：

.main {
    padding   : 0;
}
.middle-box {
    max-width : 100%;
}
.middle-box::before {
    max-width : 100%;
}

内容的提问来源于stack exchange，提问作者cris