如何識別幻影差距？

Question

Screenshot http://uploadpie.com/EKA3i

頭部元素包含一個向左浮動，和一個（與四個立項目）浮動到右側。 很簡單，除了帶有「最佳城市指南」的文字與右邊的UL略有不符。
底部邊距和下一個容器元素與圖像之間存在間隙......
這個間隙是否會導致不對齊？
什麼導致了兩個「容器」之間的差距？

Here is a codepen of it （有點不是強制性的代碼片段更全面）

<header class="main-header clearfix"> 
     <h1 class="name"><a href="#">Best City Guide</a></h1> 
     <ul class="main-nav"> 
      <li><a href="#">ice cream</a></li> 
      <li><a href="#">donuts</a></li> 
      <li><a href="#">tea</a></li> 
      <li><a href="#">coffee</a></li> 
     </ul> 
    </header><!--/.main-header--> 

Answer 1

頭的高度，在這種情況下，由<ul>決定和其子<li>元素，而不是<h1>左側。

我通過使用Google Chrome開發工具中的「檢查元素」對標題中的每個元素髮現了這一點，直到找到填充標題的整個高度或顯示與高度匹配的邊距和/或填充的元素。

具體這個CSS：

@media (min-width: 769px) 
.main-nav { 
    float: right; 
    margin: 0.67em 0; 
} 

而對於<li> elements：

@media (min-width: 769px) 
.main-nav li { 
    padding: .67em 3em; 
}