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 plugin. HERE is a jsFiddle.

It came out pretty nice, except 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?