Fixed Header on Top instead of Above


I'm trying to get a fixed header at the top of the page but for some reason it keeps going on top of the container instead. When I use margin-bottom or margin-top then it still sticks to the container.


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; 
.full-container {
.boxborder {
    -webkit-box-shadow:inset 0px 0px 0px 10px black;
    -moz-box-shado:inset 0px 0px 0px 1px black;
    box-shadow:inset 0px 0px 0px 1px black;
.header {
    height: 150px;
    margin-bottom: 20px;
    position: fixed;
.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 1200px;


<!DOCTYPE html>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <div class="full-container header boxborder"></div>
        <div class="container boxborder"></div>
Problem courtesy of: ThreaT


You need to define top and left in your css for .header

Solution courtesy of: reinder


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.