Al T.

Какая-то дичь с padding и margin, на лицо полное непонимание, что вы делаете, советую выучите flexbox и будет вам счастье.
Например, можете это сделать здесь в игровой форме (новички в восторге).

Как вариант предложу сделать доп. обёртку (".inner" внутри ".container")

<div class="container">
  <div class="inner">
    <div class="element">123</div>
    <div class="element">456</div>
    <div class="element">789</div>
  </div>
</div>

Далее в CSS мы делаем боковые margin элементам и отрицательные margin div-обёртке (таким образом лишние margin'ы по бокам "провалятся" в отрицательные margin'ы родительского div-обёртки).

.inner {
  margin: 0 -20px;
}
.element {
  margin: 0 20px;
}