html css header,html - CSS Sticky header - Stack Overflow

I have added a sticky header to my homepage, however the sticky header seems to be behind the rest of the content on the page, so when i scroll down the page, images and text are on top of the header, is there a way to stop this?

Here is my code:

/* Reset body padding and margins */

body

{

margin: 0;

padding: 0;

}

/* Make Header Sticky */

#header_container

{

background: #827878;

border: 1px solid #666;

height: 60px;

left: 0;

position: fixed;

width: 100%;

top: 0;

}

#header

{

line-height: 60px;

margin: 10 auto;

width: 940px;

text-align: left;

font-size: 26px;

color: #f5f5f5;

line-height: 28px;

margin-bottom: 14px;

font-family: 'Source Sans Pro',sans-serif;

}

/* CSS for the content of page. I am giving top and bottom

padding of 80px to make sure the header and footer

do not overlap the content. */

#container

{

margin: 0 auto;

overflow: auto;

padding: 80px 0;

width: 940px;

}

#content

{

}

/* Make Footer Sticky */

#footer_container

{

background: #eee;

border: 1px solid #666;

bottom: 0;

height: 60px;

left: 0;

position: fixed;

width: 100%;

}

#footer

{

line-height: 60px;

margin: 0 auto;

width: 940px;

text-align: center;

}

Header Content