與CSS的響應式固定標題

我對CSS很新，所以請原諒我的天真錯誤。與CSS的響應式固定標題

目標：試圖做出一個簡單和響應的佈局。我可以使＃容器和＃內容響應，但固定的＃標題保持原位並在調整瀏覽器窗口大小時溢出。如果您將瀏覽器窗口向左推，則會看到我在說什麼。

另外，側面的問題：如果我要在標題中添加一個圖像，是否會應用相同（潛在）解決方案？如果你對這種佈局感到好奇，我試圖編輯我的「Tumblr」佈局，並且我想讓它響應（這是我試驗過的一個私人tumblr博客，我並不試圖讓它響應手機/平板電腦 - 至今）

下面是這個的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; 
}

謝謝所有幫助！再次，我也是新的...

來源

2014-08-28 user1478743