Выравнивание элементов внутри блока по центру, но что бы последний был слева

У меня есть контейнер, внутри которого находятся несколько элементов, для выравнивания использую:

display: flex;

Входные данные:

1. Есть контейнер, внутри которого находится 5 элементов (может быть любое другое значение). Размер контейнера не фиксирован, изменяется в зависимости от изменения ширины экрана.
2. Расстояние между элементами в контейнере должно быть всегда одинаково и равняться 20px.
3. Элементы должны располагаться по центру контейнера.
4. Последние элементы должны располагаться слева. Например, если есть 4 элемента, где 3 на первой строке, а один на второй, то последний элемент должен располагаться ровно под первым.

Я пробовал:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  border: 2px solid black;
}

.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #AB012D;
}

<div class="container">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

В этом примере элементы расположены не по центру, а смещены влево, мне это не подходит.

Я пробовал добавить:

justify-content: center;

но тогда последние элементы располагаются по центру.

Мне нужно чтобы они смещались как можно левее, т.е. первый элемент в последней строчке расположен ровно под самым первым элементом.

Так же можно использовать:

justify-content: space-between;

но тогда расстояние между элементами изменяется, чего нельзя допустить.

Как решить такую проблему?

Необязательно использовать именно flex, можно любые другие технологии, главное чтобы это работало во всех более менее современных браузерах.