Responsive Fixed Header with CSS

Question

I am very new to CSS, so excuse my naive mistakes.

Goal: Trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. If you resize the browser window by pushing it to the left, you will see what I am talking about.

Also, side question: If I were to add an Image in the header, would the same (potential) solution apply? If you're curious about this kind of lay-out, I am trying to edit my "Tumblr" layout and I want to make it responsive (it's a private tumblr blog that I experiment on, I am not trying to make it responsive on cell phones / tablets – yet.)

Here is this JSFIDDLE: http://jsfiddle.net/yrbvw473/2/

    HTML
<div id="container">
    <div id="header">This Is The Header</div>
    <div id="content">
        <div class="post">A</div>
        <div class="post">A</div>
        <div class="post">A</div>
    </div>
</div>


    CSS
    #container {
    border: 0px solid;
    max-width: 640px;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    display: block;
    overflow-x: hidden;
}
    #header {
    margin-top: 0px;
    margin-bottom: 0px;
    position: fixed;
    background-color: grey;
    width: 640px;
    z-index: 1;
    text-align: center;
    display: block;
}
    #content {
    width: 100%;
    overflow-x: hidden;
    clear: both;
    border: 1px solid;
    margin-top: 50px;
}
    .post {
    margin-bottom: 45px;
    width: 100%;
    border: 1px solid;
    margin-top: 50px;
    text-align: center;
}

Thank you for all the help! Again, I am new too this...

Answer 1

Comment or remove this position: fixed; on #header. And change width to max-width: 563px;

Answer 2

bcause u put the value of header width, that's why the header cannot flexible following browser width. use width:100% instead SEE FIDDLE