How to center cards in a flex container
<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>