Bootstrap-容器上的边距问题

Question

我正在尝试使用Bootstrap间隔属性 mx-＃在容器上设置左右边界，但这会导致容器对齐变得疯狂-请参见附件。我想对大型，中型和小型断点应用边距，但要使容器保持居中。我已经将自己的 max-width 的自定义CSS应用于容器。另外，我已经尝试过打开和关闭 box-sizing：border-box ，但这似乎也无济于事。有任何解决办法的建议吗？

* {
    box-sizing: border-box;
}

.container {
  max-width: 960px;
}

<div class="container bg-white text-dark px-4 my-lg-5 my-md-4 my-3 mx-3">
  <!--mx-lg-5 mx-md-3 mx-sm-0 // px-lg-4 px-md-3 px-sm-0 px-0-->
  <div class='row'>
    <div class='col-12'>
      <h3>About me</h3>
      <hr>
    </div>
  </div>
</div>

Answer 1

也尝试赋予这些CSS属性，宽度：100％。还可以粘贴代码，这将有助于调试