どうすればnavbarとメインの背景divの間の空白を排除できますか？

Question

お手伝いができたら幸いです。フレームワークなしでコード化して以来、長い時間がかかりました。そのため、バニラのhtmlやcssをリフレッシャーとして意図的に使用しています。

クイックウェブサイトのプロトタイプを作成し始めました。完全にビューポートのバックグラウンド用のCSSルールを作成しているにもかかわらず、なぜnavbar要素と背景セクションの下に空白があるのか​​理解できません。バックグラウンドセクションをnavbarの直後から開始したい。

注：テストでは、スタイリングの問題はhtml要素とbody要素の規則に関連しているようです。私は自分の背景セクションと一致するように色を設定することができましたが、何とか後で他の問題を引き起こす可能性があると感じました。または少なくとも、それは不正行為のように感じます。別の解決策がありますか？最も重要なのは、私が設定したCSSのルールを考えれば、なぜこれが起こっているのか？私が何か重要なことを見過ごしていない限り、すべてが整然としたものであり、検査要素は役に立たない。

他のすべての機能はうまくいきますが、チャンクを作成する方が好きなので、下の例は面倒です。

私のコーディングでは、ごめんなさい。私は主にグラフィックデザイナーです。ここ

html, body { 
    margin:0px; 
    padding:0px; 
    border:0px; 
    background-color:white; 
} 

全Codepen：http://codepen.io/J_Davis/pen/RGLVPv

ありがとう！

Answer 1

bigBGクラスの余白部分を-20pxに設定することもできます。このような ：コーディング

.bigBG { 
    background:#FF5733; 
    min-height:100vh; 
    margin-top:-20px; 
    padding:0px; 
} 

ハッピー！

Answer 2

は、あなたのラッパーにこの小道具を追加します。

display: flex; 
flex-direction: column; 

それは次のようになります。

#wrapper { 
    display: flex; 
    flex-direction: column; 
    margin:0px; 
    padding:0px; 
    border:0px; 
} 

Hereあなたはそれが幸せな新年

作業持っています！