html - div オーバーフローは非表示ですが、キーボードの右矢印キーを使用してスクロールできます

Question

私は奇妙な問題を抱えています。確かに、これが css の問題であることはわかっていますが、正確な問題がどこにあるのかわかりません。

親divがオーバーフローして非表示になっているため、ブラウザーでは「whatwedo_container」は表示されませんが、右キーを押すか、iPadで水平にスクロールすると空白が表示されます。

私のHTMLコード

<div class="aboutus">
    <div class="about_container">Some visible Content</div>
    <div class="whatwedo_container">Some hidden content</div>
</div>

CSS

.aboutus {
    background: #20407B;
    margin-top: 0;
    overflow: hidden;
    width:100%
}
.about_container {
    margin: 170px auto 0;
    position: relative;
    width: 1100px;
    background:green;
}
.whatwedo_container {
    background: none repeat scroll 0 0 transparent;
    position: absolute;
    right: -100%;
    width: 100%;
    overflow:hidden;
    background:red;
}

jsfiddle : http://jsfiddle.net/squidraj/wsYFh/

助けてください。よろしくお願いします。