CSS背景色問題

Question

我只有一個標題div到該div中，有一個導航欄，此后有一些內容我只是給標題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

應用

body{
  margin:auto;
}

請參見下面的代碼段

 .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

您的背景不會占據整個屏幕。 您應該提及背景以整個寬度。

背景尺寸：封面；

Answer 3

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

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

通常，當我在頁面上放置圖片或輸入標簽時，它的末尾會帶有斜線。 這可能有差異，也可能沒有差異。

與該圖像的替代文本相同。 嘗試在其中放置任何隨機詞。