title: How to center cards in a flex container
body: <p>I want to position these cards exactly in the middle of the lightblue background. And also when I shrink the browser the space between the cards should decrease as well. (I'm using Chrome.)</p>
  
  <p><a href="https://i.stack.imgur.com/d8Zxk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d8Zxk.jpg" alt="screenshot"></a></p>
  
  <p>My style.css file which is not working</p>
  
  <pre><code>.flex-item{
      height: 350px;
      width: 250px;
      background-color: white;
      text-align: center;
      margin: 15px;
      display: inline-block;
      border: 1px solid #ccc;
      box-shadow: 0px 5px 25px #aaa;
      border-radius: 10px;
  }
  
  
  .flex-container{
      display: flex;
      webkit-justify-content: center;
      height:380px;
      background-color: lightblue;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>       &lt;!-- cards --&gt;
     &lt;div class="flex-container"&gt;
         &lt;div class="row"&gt;
            &lt;div class="col-md-3 flex-item" &gt;
               &lt;img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"&gt;
               &lt;legend&gt;Section&lt;/legend&gt; 
               &lt;p&gt;Lorem ipsum dolor sit amet glo dlbogn&lt;/p&gt;
               &lt;button class="btn btn-success btn-sm" style="float:right;" &gt;Read More&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 flex-item" &gt;
               &lt;img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"&gt;
               &lt;legend&gt;Section&lt;/legend&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet glo dlbogn&lt;/p&gt;
                &lt;button class="btn btn-success btn-sm" style="float:right;" &gt;Read More&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3 flex-item" &gt;
               &lt;img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;"&gt;
               &lt;legend&gt;Section&lt;/legend&gt;
               &lt;p&gt;Lorem ipsum dolor sit amet glo dlbogn&lt;/p&gt;
               &lt;button class="btn btn-success btn-sm" style="float:right;" &gt;Read More&lt;/button&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>