title: Centering dynamic containers on page using Bootstrap
body: <p>I am currently working on a system that shows multiple containers (container-fluid to be precise) on a page. These containers are configured so there's no set number of them. Each of them <em>should</em> have a automatic width and a max width.
  I want there to be as much containers as possible on the same height. This works fine, but there appears to be a white space on the right side. The side between the left screen border and the left container should be equal to the space between the right container and the right screen border.
  These containers contain multiple rows and colums.</p>
  
  <p>I tried setting the margin to auto, removing paddings etc. I also looked up some other threads about this right space. None of these were helpful.</p>
  
  <p>CSS:</p>
  
  <pre><code>.table {
      width: 100%;
      margin-top: 0;
      clear: both;
      margin-bottom: 6px!important;
      max-width: none!important;
  }
  .container-fluid {
      max-width: 900px;
      width: 100%;
      position: relative; 
      display: inline-block;
      clear: both;
  }
  td {
      display: table-cell;
      padding: 10px;
  }
  tr {
      display: table-row;
      vertical-align: inherit;
      border-color: inherit;
  }
  .pagination {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
  }
  .table-container {
      clear: both;
      overflow: auto;
      overflow-y: hidden;
  }
  </code></pre>
  
  <p>Picture:
  <a href="https://i.stack.imgur.com/ijNKM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ijNKM.png" alt="Picture"></a></p>
  
  <p>As you can see, the right space is much bigger.</p>
  
  <p><a href="http://robindebaets.be/leaderheads/leaderboard.php" rel="nofollow noreferrer">Site</a></p>