Content div going over fixed navbar

I've got a stylesheet where the intention is to have a fixed navbar which stays at the top of the screen no matter how far you scroll down. For this I've just used position:fixed; - but when I actually scroll down, the #content div overrides it and goes straight over the top (so the navbar stays at the top of the page but is underneath the content div.)

I haven't done any serious CSS coding in years, so I'm a bit rusty - it's probably a very simple solution, so apologies for being so trivial!

style.css

body {
    margin:0;
    background:#eeeeee;
}

#navbar {
    background-color:#990000;
    position:fixed;
    width:100%;
    height:50px;
    text-align:center;
    vertical-align:middle;
    line-height:50px;
    top:0px;
}

#navbar a {
    color:#fff;
}

#content {
    background:#eeeeee;
    margin-top:50px;
    width:100%;
}

#feed {
    background: #fff;
    position:absolute;
    left:22%;
    width:776px;
}

Pages are structured like this:

<body>
    <div id="navbar"><?php include core/navbar.php; ?></div>
    <div id="content">
        <div id="feed">
            CONTENT
        </div>
    </div>
</body>