title: how "http://ghost.org/" html/css works
body: <p>on <a href="http://ghost.org/" rel="nofollow">http://ghost.org/</a> page there is section for logos.
  If we see the html source of this section </p>
  
  <pre><code>&lt;div class= "logos"&gt;
     &lt;section class="logos-section"&gt;
         &lt;span class="logo"&gt;...&lt;/span&gt;      ---- Ref1
         ...
     &lt;/section&gt;
     &lt;section class="logos-section"&gt;
         &lt;span class="logo"&gt;...&lt;/span&gt;      ---- Ref2
          ...
     &lt;/section&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Then why Ref2 image is not just below the Ref1 ?<br>
  why it is shifted by "s1" amount ?</p>
  
  <p><img src="https://lh4.googleusercontent.com/-zgBre1ggu34/UmImvEo6F1I/AAAAAAAAARA/dmP0mfS-X64/w1044-h522-no/Untitled.png" alt="image"></p>