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 plugin.

var ps = new PerfectScrollbar('#carousel');

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  background: #212121;
  justify-content: center;
  align-items: center;
}

#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0 0 70px 0;
}
#carousel a {
  text-decoration: none;
  color: #fff;
}
#carousel img {
  display: block;
  width: 100%;
}
#carousel .caption {
  padding: 20px 20px 0 20px;
}
#carousel h2 {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel p {
  font-size: 10px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 auto;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>
<div class="page-wrapper">
  <div class="hero d-flex">
    <div class="container-fluid p-0">
      <ul id="carousel">
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/people" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>A true story</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/nature" alt="">
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum. Dolor sit amet.</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/arch" alt="">
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum. Dolor sit amet</p>
        </div>
        </a>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4">
          <a href="#">
        <img src="https://placeimg.com/600/400/animals" alt="">
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>

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

from Unable to set a fixed width and center custom scrollbar