Увы так сделать нельзя на CSS.
Если бы блоков было поменьше и они бы занимали не все пространство, то решение очевидно. Text-align: center для их контейнера. Но у вас блоков гораздо больше, они выстроены в одну линию и прилично вылазят за пределы контейнера. Flex тут тоже не поможет. он просто умеет когда надо переносить блоки на новую строку.
По сути ни один блок не может быть шире своего контейнера, если вы не задали ему размер вручную шире.
Ну можно так схитрить:
codepen.io/anon/pen/KVqGza
Еще нормальный вариант сделать это на JS:
1. Посчитать кол-во блоков
2. Посчитать их ширину
3. Сложить
4. Результат добавить в with контейнера
5. Контейнеру добавить отрицательный margin-left
Простой
Средний