Я пытаюсь установить равномерное левое и правое поля для контейнера, используя свойство интервала Bootstrap mx - # , но это приводит к сбою выравнивания контейнера - см. Прикрепленное изображение.Я хочу применить поля к большим, средним и маленьким точкам останова, но контейнер должен оставаться в центре.Я применил свой собственный CSS max-width к контейнеру.Кроме того, я уже пробовал включать и выключать 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>