Need review, increasing top margin on content increases the height of header - css

Question

So if I increase the top margin on #featured, it pulls the height from header down with it. What am I doing wrong?
example. if I change #featured {margin:0 auto} to #featured {margin:20px auto}, the white of the header will go down with 20 px, and then show featured. What I want is that #featured gets pulled down 20px and a grey 'border' remains between featured and header
site: http://e2-repair.be/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
height: 100px;
}
header #header-cont {
width: 1000px;
margin: 0 auto;
height: 100px;
font-family: 'Sofadi One', cursive;
}
header img {
height: 80px;
width: 80px;
float:left;
margin-top:10px;
}
header h1 {
font-size:32px;
float:left;
height:100px;
line-height:100px;
}
header nav{
float: right;
}
header nav ul {
list-style: none;
display: block;
height:100px;
}
header ul li {
display: inline-block;
padding: 0 50px;
}
header ul li a{
text-decoration: none;
color: #990000;
display: block;
height: 100px;
line-height: 100px;
border-top: 3px solid;
border-color: #FFF;
-webkit-transition: border-color .1s linear;
-moz-transition: border-color .1s linear;
-o-transition: border-color .1s linear;
transition: border-color .1s linear;
}
nav ul li a:hover {
border-color: #990000;
}
header a:hover, header a:visited, header a:active {
color: #333;
text-decoration: none;
outline: 0;
}
#content-1 {
height: 400px;
background-color: grey;
}
#featured {
position:relative;
height: 350px;
width: 1000px;
margin: 0 auto;
border:2px solid;
border-radius:5px;
border-color:white;
}
html:
<header>
<div id="header-cont">
<img src="logo.png" alt="Logo" />
<h1>E2 Repair</h1>
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
<div id="content-1">
<div id="featured">
fewfwe
</div>
</div>

Answer 1

Add a padding-top inside your #content-1 container instead of adding a margin to its child.
Alternatively, you can add an overflow: auto to the #content-1 contaner, and then the margins applied to its child #featured will work.
The reason why this works like this is due to the fact that two elements margins will join together (collapse) when adjacent. So, the margin applied to the child elements gets really joined with the parent one. This, unless the margins don't touch eachother (which happens if you use a padding): infact, you could as well use:
#content-1 { padding: 1px; }
#featured { margin: 19px auto; }
As long as they are not touching eachother, they will not collapse, so the child element maintains its own margin. From the specs:
The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
Source
The overflow: auto has the effect of not making borders collapse (from the above page):
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Answer 2

You should use padding-top, apply it to content-1 container. Padding will be applied inside the container, however margin will only be applied outside the container. I suggest you to read some articles online for better understanding.
http://html.net/tutorials/css/lesson10.php