탐색과 ​​헤더 사이의 간격을 제거하는 방법은 무엇입니까? 내비게이션과 메인 컨텐츠 사이에서도?

Question

탐색과 ​​헤더 사이의 간격을 제거하려면 어떻게해야합니까? 내비게이션과 주요 콘텐츠 사이에 또 ​​있습니까? 탐색 버튼, 즉 ul은 완벽한 위치에 있습니다. 하지만 검은 색 탐색 표시 줄로 인해 불필요한 많은 문제가 발생합니다! 나는 그것을 고칠 수 없다! .nav .nav-container에서 margin-top: 0;에

{ 
    margin: 0; 
    padding: 0; 
} 

.clear{ 
    clear: both; 
} 


body{ 

    margin: 0 auto; 
    background: #cccccc; 
} 

#header{ 
    background: #FF9900; 
    height: 160px; 
    width: 100%; 
} 

#header-container{ 
    width: 960px; 
    height: 160px; 
    margin: 0px auto 0px auto; 
} 

.nav{ 
    width: 100%; 
    height: 70px; 
    background: #000000; 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

.nav .nav-container{ 
    width: 960px; 
    height: 62px; 
    margin: auto; 
    margin-top: 5px; 
} 

.nav .nav-container ul{ 
    margin-top: 0px; 
    padding-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0px; 
} 

.nav .nav-container ul li{ 
    display: inline-block; 
    padding: 0px; 
    border-radius: 10px; 
    margin-right: 20px; 
    margin-left: 7px; 
    background: #000000; 
} 

.nav .nav-container ul li a{ 
    color: #FF9900; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 22px; 
    display: inline-block; 
    width:150px; 
    text-align: center; 
    height: 58px; 
    line-height: 250%; 

} 

.nav .nav-container ul li a:hover{ 
    background:#FF9900; 
    color: white; 
    border-radius: 10px; 
} 

.main-body{ 
    width: 960px; 
    background: white; 
    margin:auto; 
    margin-top: 0px; 
} 

Answer 1

변경 margin-top: 5px; :

여기 여기 내 CSS 코드 내 HTML

 <div id="header"> 
     <div id="header-container"> 
      Logo goes here!! 
     </div> 
    </div> 

    <div class="nav"> 
     <div class="nav-container"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Browse</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </div> 


    <div class="main-body"> 
     <h1>Contant here!</h1> 
    </div> 

입니다.

.nav .nav-container{ 
    width: 960px; 
    height: 62px; 
    margin: auto; 
    /* margin-top: 5px; becomes */ margin-top: 0; 
} 

데모 : http://jsfiddle.net/ue65t3gh/