title: Bootstrap Row won't center columns
body: <p>I'm trying to have a 3 column layout, which turns into 2 or 1 columns on smaller screens. I'm using React to populate many columns inside a row, but everything combined is something like this:</p>
  
  <pre><code>    &lt;Grid className="property-grid"&gt;
         &lt;Row className="property-row"&gt;
            &lt;Col xs={12} md={4} className="property-thumbnail" key={this.props.key}&gt;
                &lt;div className="thumbnail"&gt;
                  &lt;Image src={this.props.img} responsive className="property-pic" /&gt;
                &lt;/div&gt;
                &lt;div className="property-padded"&gt;
                  &lt;p&gt;some description&lt;/p&gt;
                &lt;/div&gt;
            &lt;/Col&gt;
            .
            .
            /* other columns */
            .
            .
         &lt;/Row&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>Here's how it looks<a href="https://i.stack.imgur.com/GZa7I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GZa7I.png" alt="enter image description here"></a></p>
  
  <pre><code>.properties-grid {
    width: 100%;
    margin: 0 auto;
    background-color: yellow;
  }
  .properties-row {
    flex-wrap: wrap;
    display: inline-flex;
    background-color: red;
    margin: 2em auto;
    width: 100%;
  }
  
  .property-thumbnail {
    margin: 2em auto;
    background-color: green;
    display: table-cell;
    max-width: 450px;
  }
  </code></pre>
  
  <p>I want the last odd column row to be on the left, so I tried using <code>display: inline-block</code>. But then this happens <a href="https://i.stack.imgur.com/B05aj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B05aj.png" alt="enter image description here"></a></p>
  
  <p>How do I make the first row look like the first picture (centered columns and some gap between them) while making sure last row stay on the left?</p>