CSSの全幅ヘッダ（全幅、体の背景を見ることができません）

Question

私はこの質問を何度も聞いたことがありますが、解決策を実装しようとするとうまくいかないようです。

現在、外部スタイルシートを使用してHTMLとCSSを取り掛かり始めています。

私は（国境は私がコンテナについて学ぶのを助けるためにのみある）以下でコンテナを作成しました。しかし

header{ 
 
\t width: 100%; 
 
\t height:100%; 
 
\t margin: 0 0 0 0; 
 
\t background: lightgrey; 
 
\t border: solid red; 
 
} 
 

 
header>h1{ 
 
\t color:black; 
 
\t border: solid blue; 
 
\t margin: 0px 0px 0px 0px; 
 
} 
 

 
header>p{ 
 
\t font-style: italic; 
 
\t text-align: left; 
 
\t color:white; 
 
\t border: solid yellow; 
 
\t margin: 0px 0px 0px 0px; 
 
}

<header> 
 
\t <h1>My Web Space</h1> 
 
\t <p> First HTML Page using Sublime Text</p> 
 
</header>

、私は、Webページでそれを実行し、幅ヘッダーはブラウザウィンドウの100％ではありません。私はまだ上、左と右の側面に体の背景（この場合は赤色）のいくつかのスライム部分を見ることができます。

は私が

Answer 1

はあなたにこれを追加効果を提示するsliderhomepageために高さと背景を設定CSS：

*{ 
margin:0; 
padding:0: 
    box-sizing:border-box; 
} 
body{ 
width:100%; 
max-width:100%; 
height:100%; 
} 
header{ 
    height:100%; 
    margin:0; 
    background: lightgrey; 
    border:2px solid red; 
} 

それは作業を参照してください：

*{ 
 
margin:0; 
 
padding:0: 
 
    box-sizing:border-box; 
 
} 
 
body{ 
 
width:100%; 
 
max-width:100%; 
 
height:100%; 
 
} 
 
header{ 
 
    height:100%; 
 
    margin:0; 
 
    background: lightgrey; 
 
    border:2px solid red; 
 
} 
 

 
header>h1{ 
 
    color:black; 
 
    border: solid blue; 
 
    margin: 0px 0px 0px 0px; 
 
} 
 

 
header>p{ 
 
    font-style: italic; 
 
    text-align: left; 
 
    color:white; 
 
    border: solid yellow; 
 
    margin: 0px 0px 0px 0px; 
 
}

<header> 
 
    <h1>My Web Space</h1> 
 
    <p> First HTML Page using Sublime Text</p> 
 
</header>

Answer 2

これはあなたがnを持っているからです本文や書類の余白やスタイルを設定しないでください。

本文またはグローバルセレクタのhr marginとpaddingを0に設定する必要があります。

*{ 
    margin: 0; 
    padding: 0; 
    } 

https://jsfiddle.net/f4x4dm09/2/