title: How to center row with a three columns row in a container-fluid
body: <p>I have <a href="http://bassfunk.meteor.com/" rel="nofollow noreferrer">this layout</a>, based on twitter bootstrap.<br />
  It looks centered in <a href="https://www.dropbox.com/s/z00rtoedsyfdxbb/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-12-01%2012.24.42.png?dl=0" rel="nofollow noreferrer">narrow screens</a></p>
  
  <p><img src="https://i.stack.imgur.com/xqY9s.png" alt="enter image description here"></p>
  
  <p>but <a href="https://www.dropbox.com/s/o471re4t3m402n5/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202014-12-01%2012.26.24.png?dl=0" rel="nofollow noreferrer">totally not centered on more wider screens</a></p>
  
  <p><img src="https://i.stack.imgur.com/DqFUT.png" alt="enter image description here"></p>
  
  <p>In html it basically looks like that:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
  
  &lt;!-- This row is perfectly centered --&gt;
        &lt;div class="row header center-block"&gt;
          &lt;div class="logo col-md-12 col-lg-12 center-block text-center"&gt;
            &lt;img src="logo.jpg"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  
  &lt;!-- This row needs to be centered --&gt;
        &lt;div class="row content center-block text-center"&gt;
  
  &lt;!-- first column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens --&gt;
          &lt;div class="col-md-5 col-lg-5 scene itemlist center-block text-center"&gt;
            &lt;div class="row scene-header"&gt;
              &lt;img src="scene.jpg"&gt;
            &lt;/div&gt; 
  
            &lt;div class="row scene-elements"&gt;
  
                  &lt;div class="scene-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/ouImJ3j.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="scene-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/6H9PBdO.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="scene-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/S731TrW.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="scene-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/tEj2TzR.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="scene-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/j0fUzW3.jpg"&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;!-- Middle row with text. This row needs to have bigger left and right margins on wider screen --&gt;
  
  &lt;div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info center-block text-center"&gt;
  
  
      &lt;div class="infoblock"&gt;
          &lt;div class="row info-header"&gt;
              MEFJUS
           &lt;/div&gt; 
           &lt;div class="row info-elements"&gt;
  
  
              &lt;p class="link"&gt;&lt;a target="_blank" href="https://soundcloud.com/mefjus"&gt;SOUNDCLOUD&lt;/a&gt;&lt;/p&gt;  
  
  
  
              &lt;p class="link"&gt;&lt;a target="_blank" href="https://www.facebook.com/mefjus"&gt;FACEBOOK&lt;/a&gt;&lt;/p&gt;  
  
  
  
              &lt;p class="link"&gt;&lt;a target="_blank" href="http://vk.com/the_upbeats"&gt;VK&lt;/a&gt;&lt;/p&gt;  
  
  
  
           &lt;/div&gt; 
       &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;!-- seconf column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens --&gt;
          &lt;div class="col-md-5 col-lg-5 our itemlist center-block text-center"&gt;
            &lt;div class="row our-header"&gt;
              &lt;img src="our.jpg"&gt;
            &lt;/div&gt; 
  
            &lt;div class="row our-elements"&gt;
  
                  &lt;div class="our-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/IxrgHax.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="our-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/X3roxXK.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="our-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/LH8N8uH.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="our-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/zb3dARv.jpg"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="our-element"&gt;
                      &lt;img class="clickimg" src="http://i.imgur.com/rDDkie8.jpg"&gt;
                  &lt;/div&gt;
  
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;footer class="footer text-center"&gt;&lt;/footer&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;&lt;/body&gt;
  </code></pre>
  
  <p>I need the <code>.content</code> row to be centered as the <code>.header</code> row, but <code>.center-block</code> and <code>.text-center</code> don't work here as they do with the logo. 
  As well I need first and third columns to have 3 imager per row on narrow screens and 4 images per row on wider screens. As well, I would like to add some margins from the left and right for middle <code>.info</code> column.</p>
  
  <p>What should I do? I'm sorry for so many questions, I'm new in this. </p>
  
  <p><strong>UPD</strong>
  <a href="http://jsfiddle.net/zahn56wn/" rel="nofollow noreferrer">JSFIDDLE of a layout</a>
  <a href="http://bassfunk.meteor.com/" rel="nofollow noreferrer">ORIGINAL</a></p>