팬텀 간격을 확인하는 방법?

Question

Screenshot http://uploadpie.com/EKA3i

헤더 요소에는 왼쪽으로 플로트되고, (4 개 li 항목으로) 오른쪽으로 플로팅됩니다. "Best City Guide"텍스트가 오른쪽의 UL과 약간 일치하지 않는 것을 제외하고는 충분히 간단합니다.
이미지와 함께 하단 여백과 다음 컨테이너 요소 사이에 GAP이 있습니다.
비 정렬을 일으키는 간격이 있습니까?
두 '용기'사이의 틈을 일으키는 원인은 무엇입니까?

Here is a codepen of it (필수 코드 SNIPPIT보다 조금 더 포괄적 인)

<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

왼쪽에 <li> 요소가 아닌 <h1>를 헤더의 높이가 <ul>에 의해이 경우 결정되고 그 아이의 .

헤더의 전체 높이를 채우거나 높이와 일치하는 여백 및/또는 패딩을 발견 할 때까지 헤더 내의 각 요소에 대해 Google 크롬 개발자 도구의 'inspect 요소'를 사용하여이를 발견했습니다.

특히이 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; 
}