Center align content inside a div
<p>Well, the tittle says it all. How can I center align those 3 thumbnails inside that div?
I've tried many solutions presented at SO and other places on the web but no success.</p>

<p>I'm not a professional in Bootstrap, webdesign or CSS but how can something so simple be so difficult?</p>

<p><a href="http://i.stack.imgur.com/54BaW.jpg" rel="nofollow">Check my problem here</a></p>

<p>My Bootstrap code:</p>

<pre><code>&lt;div class="row"&gt;
      &lt;div class="span3"&gt;
        &lt;div class="mask3"&gt; &lt;a href="img/profile-01.jpg" rel="prettyPhoto"&gt;&lt;img src="img/profile-01.jpg" alt=""&gt;&lt;/a&gt; &lt;/div&gt;
        &lt;div class="inside"&gt;
        &lt;/div&gt;
        &lt;!-- /.inside --&gt;
      &lt;/div&gt;
      &lt;!-- /.span3 --&gt;
      &lt;div class="span3"&gt;
        &lt;div class="mask3"&gt; &lt;a href="img/profile-01.jpg" rel="prettyPhoto"&gt;&lt;img src="img/profile-01.jpg" alt=""&gt;&lt;/a&gt; &lt;/div&gt;
        &lt;div class="inside"&gt;
        &lt;/div&gt;
        &lt;!-- /.inside --&gt;
      &lt;/div&gt;
      &lt;!-- /.span3 --&gt;
     &lt;div class="span3"&gt;
        &lt;div class="mask3"&gt; &lt;a href="img/profile-01.jpg" rel="prettyPhoto"&gt;&lt;img src="img/profile-01.jpg" alt=""&gt;&lt;/a&gt; &lt;/div&gt;
        &lt;div class="inside"&gt;
        &lt;/div&gt;
      &lt;!-- /.inside --&gt;
      &lt;/div&gt;
      &lt;!-- /.span3 --&gt;
      &lt;/div&gt;
</code></pre>

<p>My CSS section:</p>

<p><a href="https://jsbin.com/pabebetoqo/edit?html,css,output" rel="nofollow">https://jsbin.com/pabebetoqo/edit?html,css,output</a></p>