CSSの背景色の問題

Question

私はこのdivにヘッダdivを持っていますが、navbarがあり、その後にいくつかのコンテンツがあります。ちょうどそのヘッダdivに背景色を与えましたが、その背景は穴の画面幅をカバーしていませんたいその背景には、穴の画面の幅をカバーするが、そこに左、上、右 の白いスペースがあり、ここでhtmlコードです：

<!--Start header section--> 
<div class="header"> 
    <div class="container"> 
    <div class="top-nav"> 
     <h1>Apptastico</h1> 
     <ul> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    <div class="content"> 
     <img src="photos/iPhone.jpg" alt=""> 
     <div class="web-design"> 
      <h1>We design iOS apps</h1> 
      <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4> 
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
      tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. 
      Phasellus molestie tempor. Suspendisse dictum feugiat. 
      </p> 
      <input type="submit" value="Request qoute"> 
     </div> 
    </div> 
</div> 
</div> 
<!--End header section--> 

、ここでCSSコード

.header{ 
    background-color: #4b5a65; 
    height: 505px; 
    overflow: hidden; 
    padding-top: 10px; 
} 

であり、それはです結果はブラウザの画面に表示されます：

Answer 1

私はページ上の画像や入力タグを入れたときに

.header{ 
 
    background-color: #4b5a65; 
 
    height: 505px; 
 
    overflow: hidden; 
 
    padding-top: 10px; 
 
} 
 
body{ 
 
    margin:auto; 
 
}

<!--Start header section--> 
 
<div class="header"> 
 
    <div class="container"> 
 
    <div class="top-nav"> 
 
     <h1>Apptastico</h1> 
 
     <ul> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Work</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="content"> 
 
     <img src="photos/iPhone.jpg" alt=""> 
 
     <div class="web-design"> 
 
      <h1>We design iOS apps</h1> 
 
      <h4>Ut In Nulla Enim. Phasellus Molestie Magna Non Est Bibendum Non Venenatis ut In Nulla Enim. Phasellus Molestie.</h4> 
 
      <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu 
 
      tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. 
 
      Phasellus molestie tempor. Suspendisse dictum feugiat. 
 
      </p> 
 
      <input type="submit" value="Request qoute"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<!--End header section-->

Answer 2

背景が画面全体を占めていません。あなたは全体の幅を取るために背景を述べる必要があります。

background-size：cover;

Answer 3

<img src="photos/iPhone.jpg" alt="" /> 

<input type="submit" value="Request qoute" /> 

以下

body{ 
    margin:auto; 
} 

参照スニペットは、通常、それはそれらが付属して適用されますtでスラッシュ彼は終わります。これは違いを生むかもしれません。

この画像の代替テキストと同じです。任意の単語をそこに入れてみてください。