JSFiddle Demo

Tengo un div para un encabezado y un div para una envoltura de contenido.

Por alguna razón, no puedo tener un margen en la parte inferior del encabezado que obligue al ajuste de contenido a empujar hacia abajo. Simplemente lo ignora por completo y no tengo idea de por qué.

¿Alguien sabe lo que está pasando con esto? No hace esto cuando quito la posición: fijo; atributo en el encabezado, pero quiero que se arregle en la parte superior, por lo que al desplazar el encabezado siempre está a la vista.

Esperando que alguien pueda explicar por qué sucede esto o al menos cómo se llama para poder buscarlo en Google.

body {
    margin: 0;
    padding: 0;
	font-family: arial;
	background: #5A9910;
	text-align: center;
}

/* ==========================Main wrap for page==*/
div.wrap {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* ==========================Header with logo==*/
div.header {
	position: fixed;
	width: 100%;
	background: #ffffff;
	-webkit-box-shadow: 0 8px 6px -6px #333;
	-moz-box-shadow: 0 8px 6px -6px #333;
	box-shadow: 0 8px 6px -6px #333;
}

/* ==========================Header logo image==*/
img.headerlogo {
	width: 30%;
}

/* ==========================Content wrapper==*/
div.contentwrap {
	width: 80%;
	height: 1600px;
	background: #ccc;
	margin: 0 auto;
}

<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="contentwrap">
        <p>Test</p>
    </div>
</div>