CSS background-color Issue - html

Question

I just have a header div into this div there is a navbar and after that there is some content i just gave that header div a background color but that background doesn't cover the hole screen width i just wanna that background cover the hole screen width but there is white space in the left,top and right
and here is the html code :
<!--Start header section-->
<div class="header">
<div class="container">
<div class="top-nav">
<h1>Apptastico</h1>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</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-->
and here is css code
.header{
background-color: #4b5a65;
height: 505px;
overflow: hidden;
padding-top: 10px;
}
and that's the result which appear in the browser screen:

Answer 1

apply
body{
margin:auto;
}
See snippet below
.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">Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</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

Your background is not taking entire screen. You should mention background to take entire width.
background-size: cover;

Answer 3

<img src="photos/iPhone.jpg" alt="" />
<input type="submit" value="Request qoute" />
Usually when I put an image or input tag on the page, it comes with those slashes at the end. This may or may not make a difference.
Same with the alternative text for that image. Try putting any random word in there.