html - divはすぐに中央に押し下げます

Question

コンテンツを押し下げて (ctrl + マウス スクロール) ズームインすると、コンテンツがすぐに中央に表示されます。

だから私は #div left #div right の両方を隣り合わせにして、ズームすると #div left が #div right を押し下げ、#div right がすぐに中央に配置されます。

これが私のjsfiddleです。申し訳ありませんが、コピーして貼り付けてくださいhttp://jsfiddle.net/Tedeee/bBpEm/

HTML

<div id="top">
    &nbsp;<br />
    hi
</div>
<div id="outer">
    <div id="right">right</div>    
    <div id="left">left</div>
</div>

CSS

div {
    outline: red 1px solid 
}

#right { 
    width: 200px;
    height: 200px;
    float:left;
    background-color:red;
}

#left { 
    width: 200px;
    height: 200px;
    float:left;
    background-color:grey;
}

#outer {
    float:left;
    clear:both;
    text-align: center;
}

サンプル Web サイト ホーム セクションを見てみてくださいhttps://coderwall.com/welcome

ご覧のとおり、div が # 押し下げられると、右側の div が中央に移動しません。また、押し下げたら中央に配置する必要があります。

どうすればいいですか、本当に助けが必要です。ありがとう。