navとjumbotronの間の空白を削除するには？

Question

愚かな質問であれば謝罪してください！私はこれについてのすべての質問を読んで解決策を試しましたが、私はまだ白い隙間が消えることはありません。

Codecademyを通じてHTML & CSSを学習しています。コードをcodepenにコピーすると、navとジャンボトロンの間に空白が表示されました。

私は余白を削除しようとしましたが、消えることはありません。前もって感謝します。

.container { 
 
    max-width: 940px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header { 
 
    background-color: #30627E; 
 
    display: inline-block; 
 
    width: 100%; 
 
    margin-bottom: 0; 
 
    padding-bottom: 0; 
 
} 
 

 
.header ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin-bottom: 0; 
 
    color: #fff; 
 
    display: inline-block; 
 
} 
 

 
.nav li { 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 20px 30px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    margin-bottom: 0; 
 
} 
 

 
.navbar-nav { 
 
    margin-bottom: 20px; 
 
} 
 

 
.header .main { 
 
    background-color: #E52364; 
 
    font-size: 28px; 
 
    margin: 0; 
 
} 
 

 
.jumbotron { 
 
    background: url(https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg) repeat center center; 
 
    background-size: cover; 
 
    height: 500px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
.jumbotron h1 { 
 
    color: #E52364 !important; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin-top: 0; 
 
    padding: 0; 
 
}

<div class="header"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
     \t <ul class="nav navbar-nav"> 
 
     \t <li class="main">Adoptly</li> 
 
     \t <li>About</li> 
 
     \t <li>Animals</li> 
 
     \t <li>Blog</li> 
 
     \t <li>Events</li> 
 
     \t </ul> 
 
    \t </div> 
 
    </div> 
 
    </div> 
 
     
 

 
    <div class="jumbotron"> 
 
     <div class="container"> 
 
     <h1>Meet your new best friend.</h1> 
 
     </div> 
 
    </div>

Answer 1

これは悪名高いHTMLインラインブロック要素の空間によって引き起こされます。通常は、HTMLタグの間の実際のスペースを削除しなければならないが、あなたが単にblockレベル要素にあなたの.headerを変換するために容易になるだろう：

.header { 
    ⋮ 
    display: block; 
} 

jsFiddle：そのためhttps://jsfiddle.net/azizn/mpxnu8og/