Unable to set a fixed width and center custom scrollbar

Unable to set a fixed width and center custom scrollbar

I am working on some kind of carousel with items aligned horizontally.

Each of the child elements (there will be about a dozen of them) should stretch one third of the parent's width. Three items should be visible at any one time.

I have used Bootstrap 4, some custom CSS and the Perfect-scrollbar pluginHERE is a jsFiddle.

It came out pretty niceexcept I have been struggling to find a way to set a fixed width (of 300px) for the rail (the gray line) and centering it. How can I do that?