Как выровнять эти элементы так, чтобы они были в очереди?

Question

У меня есть эта ссылка: site

Как вы можете видеть на рисунке ниже. элементы расположены не в соответствии

http://i62.tinypic.com/xyfeu.jpg

Я пытался добавить этот код #content > ul > div:nth-child(2) > li:nth-child(5) {margin-top:-21px;} но испортить эту страницу:

link

КОД HTML:

<div> 

      <li class="block first-post"> 
      <a href="http://www.dg-design.ch/reliance-trust/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2014/10/RT-Port11-436x272.jpg" class="attachment-vantage-grid-loop wp-post-image" alt="RT_Port1"></a> 
      <h3><a href="http://www.dg-design.ch/reliance-trust/" class="fancybox-iframe">Reliance Trust</a></h3><br><p class="italic">May 8, 2015</p> 
      <p></p><div> 
<p style="text-align: justify;">As you all probably know the area of Geneva is dominated by banking and financial environments. We have recently joined this group&nbsp;through our new project for a financial institution in Geneva:<span class="Apple-converted-space">&nbsp;</span><a href="http://reliancetrustgroup.com/" data-blogger-escaped-target="_blank">Reliance Trust Group</a>.</p> 

</div> 
<div style="text-align: justify;"> 

Reliance Trust, a newly established trust company provides financial advice both for corporate and private clients. Their range of services is&nbsp;very wide and their p...<p></p> 
     </div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/fine-traiteur-art-catering/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/IF-Port-200x200.jpg" class="attachment-blog wp-post-image" alt="IF_Port"></a> 
     <h3><a href="http://www.dg-design.ch/fine-traiteur-art-catering/" class="fancybox-iframe">In Finé Traiteur an...</a></h3><br> 
       <p class="italic"> April 8, 2015</p> 
     <p></p><div> 
<p style="text-align: justify;">For the first time we went into...</p> 
    </div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/home-global/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2014/10/HG-Port2-200x200.png" class="attachment-blog wp-post-image" alt="HG_Port2"></a> 
     <h3><a href="http://www.dg-design.ch/home-global/" class="fancybox-iframe">Home. Global...</a></h3><br> 
       <p class="italic"> February 14, 2015</p> 
     <p></p><p style="text-align: justify;">If you are looking for a place away fr...</p> 
    </li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/new-brochures-forimtech-2/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/FT-Port-Beh-Brochure14-Inside1-200x200.jpg" class="attachment-blog wp-post-image" alt="FT_Port-Beh_Brochure14-Inside"></a> 
     <h3><a href="http://www.dg-design.ch/new-brochures-forimtech-2/" class="fancybox-iframe">New brochures for fo...</a></h3><br> 
       <p class="italic"> February 2, 2015</p> 
     <p></p><div> 
<div>After successfully designing forimtech's brochure last yea...<p></p> 
    </div></div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/revolutions-fashion-tamara-perez/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/IMG-6320-Edit-200x200.jpg" class="attachment-blog wp-post-image" alt="IMG_6320-Edit"></a> 
     <h3><a href="http://www.dg-design.ch/revolutions-fashion-tamara-perez/" class="fancybox-iframe">revolutions … ...</a></h3><br> 
       <p class="italic"> </p> 
     <p></p><div>Happy New Year! We figured we should show you some pictures from ...<p></p> 
    </div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/fun-video-new-project/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/DSC-1631-200x200.jpg" class="attachment-blog wp-post-image" alt="DSC_1631"></a> 
     <h3><a href="http://www.dg-design.ch/fun-video-new-project/" class="fancybox-iframe">fun…video…new project</a></h3><br> 
<p class="italic"></p> 
     <p></p><div>As you might have seen, we have been filming a new project on Saturday together with our well known by now Tamara Perez, Kevin Solleroz and this time, the beautiful blogger Natacha Baudot from Premier Page. We cannot wait to show you the results. We have only filmed the first part of our project this weekend. The rest will come at the end of the month, during the event we have organised at Beau Rivage Lausanne for Tamara Perez.</div> 
<div></div> 
<div>More details to come soon. This is very exciting and we are happy to share the great results of this half year for DG design soon. We have...<p></p> 
    </div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/photo-shooting-ss2014-tamara-perez/" class="fancybox-iframe"></a> 
     <h3><a href="http://www.dg-design.ch/photo-shooting-ss2014-tamara-perez/" class="fancybox-iframe">Photo Shooting SS2014 – Tamara Perez</a></h3><br> 
<p class="italic"></p> 
     <p></p><div>Flirting with fashion becomes extremely interesting. We are loving the craziness behind it, the lack of sleep before a big event, taking care of last details, great creations and talented people.</div> 
<div></div> 
<div>This time I will not say anything more...I let you have a look at how we have spent our Sunday together with<a href="https://www.facebook.com/kevwestprod" target="_blank">KevWestProduction</a> who did an amazing job for the behind the scenes of <a href="http://www.tamaraperez.com/" target="_blank">Tamara Perez.</a></div> 
<div>Enjoy and come see the rest at <a href="http:...&lt;/p&gt; 
    &lt;/li&gt; 



     &lt;li class=" block"=""> 
     </a><a href="http://www.dg-design.ch/clients-successful/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/The-Economist-200x200.jpg" class="attachment-blog wp-post-image" alt="The Economist"></a> 
     <h3><a href="http://www.dg-design.ch/clients-successful/" class="fancybox-iframe">Our clients are successful!</a></h3><br> 
<p class="italic"></p> 
     <p></p><div>End of August we went on holidays to Romania. Fun crazy first day in Bucharest, just so we end up talking to people and then more people and ... that's how we ended up with a project. Great one, I don't say no, but very urgent.</div> 
<div></div> 
<div>So this is how our holidays end up spent mostly inside the house, with the laptops in front of us. We did go out a bit. For meetings with our new client :) And to make matters better, we went to the beach! Never forgot to take the laptops along.</div> 
<div></div> 
<div>We had to create the entire marketing campaign of Electronic Doctor, a ...<p></p> 
    </div></div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/fashion/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/TP-Edelweiss-Invitation-200x200.jpg" class="attachment-blog wp-post-image" alt="TP_Edelweiss_Invitation"></a> 
     <h3><a href="http://www.dg-design.ch/fashion/" class="fancybox-iframe">…and we do fashion…</a></h3><br> 
<p class="italic"></p> 
     <p></p><div>Yes, it's right. We are getting more and more involved with the <b>fashion industry</b>. This is a direction that just happened to us and we are extremely excited. We appreciate design in general, and mixing &amp; matching several areas seemed like a challenge we could not deny to ourselves!</div> 
<div>So here we are sharing it with all of you!</div> 
<div></div> 
<div>A few days ago we met <b><a href="http://www.tamaraperez.com/" target="_blank">Tamara Perez</a>,</b> a young and dynamic Swiss Macedonian designer, whom we highly appreciate! We are working on some very exciting projects w...<p></p> 
    </div></li> 



     <li class="block"> 
     <a href="http://www.dg-design.ch/united-nations-waterlex-dg-design/" class="fancybox-iframe"><img src="http://www.dg-design.ch/wp-content/uploads/2015/02/UN-Image-Blogpost-200x200.jpg" class="attachment-blog wp-post-image" alt="UN Image Blogpost"></a> 
     <h3><a href="http://www.dg-design.ch/united-nations-waterlex-dg-design/" class="fancybox-iframe">United Nations, WaterLex and DG Design</a></h3><br> 
<p class="italic"></p> 
     <p></p><div>You've seen us Tweet, Instagram, and Facebook, and you are probably wondering what in the world are we doing at the United Nations today, Friday the 13th. As you might know from the Design4Good <a href="http://www.dg-design.ch/values.html" target="_blank">section of our site</a>, we have partnered with WaterLex, an NGO based in Geneva.</div> 
<div>Today WaterLex held a side-event on the topic of "Water and Human Rights in the Post 2015 Agenda. We were glad to be part of this high-level discussion, lead by leaders in the field of water governance, human rights and environmental affairs, as...<p></p> 
    </div></li> 


    </div> 

CODE CSS:

.block{ 
    margin-top:29px; 
    } 

.block:nth-child(-n+5){ 
    width:22.2%; 
} 

.block:nth-child(-n+4){ 
    margin-right:3.5%; 
} 

Answer 1

Это потому, что ваш div#secondary толкает его вниз.

Дайте #secondary CSS так:

#secondary { 
    float: right; 
    width: 16.762%; 
    height: 310px; 
    /* margin-bottom: 30px; */ 
} 

Маржа дно толкал div.block вниз и не устанавливая высоту толкал вниз больше.

Answer 2

Это меню «Категории» преступник? Похоже, что это мешает блочной строке.

Answer 3

Удалить этот стиль:

#secondary { 
    margin-bottom: 30px; 
} 

#secondary .widget, #footer-widgets .widget { 
    margin-bottom: 40px; 
}