inline center three image
<p>In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices. </p>

<p><a href="https://i.stack.imgur.com/QLrJH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QLrJH.png" alt="How the logos should look like"></a></p>

<p>On the mobile they should be vertical instead of horizontal.</p>

<p>I actually thought I could do it like this:</p>

<p>display: inline;
margin: 0 auto; </p>

<p>But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices? </p>

<pre><code>   &lt;div class="fullscreen landing parallax"&gt;
        &lt;div class="overlay"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-12 logo"&gt;
                        &lt;!-- /.logo --&gt;
                        &lt;img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo"&gt;
                        &lt;img src="/img/seminar/company_2-white.png" alt="company_2"&gt;
                        &lt;img src="/img/seminar/company_3-white.png" alt="company_3"&gt;
                    &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.logo {
    margin: 20px 0 15px 0;

}
.logo img{
    margin-left: 160px;
    width: 163px; 
}
</code></pre>