html - 固定中央レイアウトのページ、スクロールバーはコンテンツの位置をシフトします

Question

私はこのレイアウトを持っています（簡略化）

<div id="main">
    <div id="header">
        ...
    </div>
    <div id="content">
        ...
    </div>
    <div id="footer">
        ...
    </div>
</div>

コンテンツをスクロール可能に保ちながら、ヘッダーとフッターを修正する必要があります。問題は、3 つすべてが中央に配置され#content {overflow-y: scroll;}ており、スクロールバーを設定して表示すると、コンテンツ全体<div id="content">が左に移動し、ヘッダーとフッターと一致しないことです。それを防ぐ方法はありますか？または、いくつかの回避策がありますか？

編集: JSFiddle の例。