Честно говоря, не очень понятна задача, которую вы решаете.
Если я правильно понял написанное, то прокрутка не должна работать так, как вы пишете - с дополнительным смещением элементов в начале или в конце.
https://developer.mozilla.org/en-US/docs/Web/API/E...
В русской версии:
scrollLeft может быть установлен, как любое целое число, однако:
Если элемент не может быть прокручен (т.е. у него нет переполнения), scrollLeft устанавливается в 0.
Если установили значение меньше 0 (больше 0 при расположении элементов справа налево), scrollLeft устанавливается в 0.
Если установлено значение больше, чем максимум прокручиваемого контента, scrollLeft устанавливается в максимум.
Может быть вам стоит добавить в начале и в конце какой-нибудь скрытый элемент, который будет менять размеры в зависимости от того, какой элемент (кнопка) должна быть в центре - чтоб отталкивать от границ контейнера первый и последний элемент.
Вот это:
justify-content: center;
по-моему, там не нужно.
P.S. Для более быстрого отклика при разборе простых случаев, полезно так же освоить codepen и т.п.
Вот, к примеру, демка для вашего вопроса:
https://codepen.io/alkthecode/pen/ZENWGRZ 
