css display flex not working properly on chrome and safari
<p>I used flexbox properties to make my section look like this:</p>

<p><a href="https://i.stack.imgur.com/UxQeW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UxQeW.jpg" alt="enter image description here"></a></p>

<p>It works fine on Chrome but I noticed a few differences when I checked firefox and safari.</p>

<p>This is how chrome looks like:
<a href="https://i.stack.imgur.com/ZPOFh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZPOFh.jpg" alt="enter image description here"></a></p>

<p>But on Firefox, I am not managing to apply to margin of 1% like I want as the red signal shows:</p>

<p><a href="https://i.stack.imgur.com/5cCiW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cCiW.jpg" alt="enter image description here"></a></p>

<p>And on safari, the boxes are all one after the other:</p>

<p><a href="https://i.stack.imgur.com/SxKBH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SxKBH.jpg" alt="enter image description here"></a></p>

<p>It is a WordPress Site and not live yet. But here is my html structure:</p>

<pre><code>    &lt;section id="services"&gt;

        // here goes the title of the container

        &lt;div class="main-container col-lg"&gt;  

               // here go all the box

         &lt;div class="services-container"&gt;    

               // this one of the boxes              
         &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
</code></pre>

<p>And the CSS:</p>

<pre><code>#services {
    background-image: url("img/Services-background.jpg");
    background-color: red;
}
.col-lg {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: initial;
    max-width: 100%;
}
.services-container {
    color: #d6d6d6;
    margin: 1%;
    max-width: 100%;
    width: 30%;
}
</code></pre>

<p>How Can I make this work on all browsers?</p>