Блог

У меня просто есть заголовок 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;
}
  

и это результат, который появляется на экране браузера:

применить

 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-->  

Ваш фон не занимает весь экран. Вы должны указать фон, чтобы он занимал всю ширину.

размер фона: обложка;

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

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

Обычно, когда я помещаю изображение или входной тег на страницу, в конце появляются эти косые черты. Это может иметь значение, а может и не иметь.

То же самое с альтернативным текстом для этого изображения. Попробуйте вставить туда любое случайное слово.