title: Unable to set a fixed width and center custom scrollbar
body: <p>I am working on some kind of carousel with items aligned horizontally.</p>
  
  <p>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.</p>
  
  <p>I have used <strong>Bootstrap 4</strong>, some custom <strong>CSS</strong> and the <strong><a href="http://utatti.github.io/perfect-scrollbar/" rel="nofollow noreferrer">Perfect-scrollbar plugin</a></strong>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ps = new PerfectScrollbar('#carousel');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="//rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/&gt;
  &lt;script src="//rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"&gt;&lt;/script&gt;
  &lt;div class="page-wrapper"&gt;
    &lt;div class="hero d-flex"&gt;
      &lt;div class="container-fluid p-0"&gt;
        &lt;ul id="carousel"&gt;
          &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;a href="#"&gt;
          &lt;img src="https://placeimg.com/600/400/people" alt=""&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem&lt;/h2&gt;
            &lt;p&gt;A true story&lt;/p&gt;
          &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;a href="#"&gt;
          &lt;img src="https://placeimg.com/600/400/nature" alt=""&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum. Dolor sit amet.&lt;/p&gt;
          &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;a href="#"&gt;
          &lt;img src="https://placeimg.com/600/400/arch" alt=""&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum. Dolor sit amet&lt;/p&gt;
          &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;a href="#"&gt;
          &lt;img src="https://placeimg.com/600/400/animals" alt=""&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Into the wild&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur&lt;/p&gt;
          &lt;/div&gt;
          &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It came out pretty nice, <em>except</em> I have been struggling to find a way to set a <strong>fixed width</strong> (of 300px) for the rail and <strong>centering</strong> it. How can I do that? </p>