Fixed Header on Top instead of Above

Problem

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.

index.css

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 {
    width:100%;
}
.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;
}

index.html

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

Solution

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

Solution courtesy of: reinder

Discussion

There is currently no discussion for this recipe.

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