html - iPad（SafariまたはChrome）だけの小さなギャップ（パディングまたはマージンの可能性があります）

Question

私たちはいくつかのウェブサイトをデザインしましたが、これらのウェブサイトは Windows、Linux、Mac の IE、FireFox、Chrome、Opera で問題ありません。

iPad (Safari または Chrome) でウェブサイトをチェックしましたが、どちらのブラウザでも、ページの右側に小さなギャップがあります。

Eric Meyer のリセット CSS を使用します: http://meyerweb.com/eric/tools/css/reset/

たとえば、スクリーンショットを撮ります：

これは<div>レイヤーで、これは css スタイルです:

この問題を解決するにはどうすればよいですか?

アップデート：

これは HTML コードです:

<div id="footer">
    <a href="http://domain.com">My WebShop V1.0</a>
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Term of use</a></li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Advertisment</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">SiteMap</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    &copy; 2013 My WebShop - Allrights reserved.
    <br />
    <a href="#" >Designed and Developed by IITA</a>
</div>

CSS コード:

#footer {
background-color: #D6D5CF;
text-align: center;
line-height: 18px;
padding: 20px;
color: #000000;
direction: rtl;
font: 11px Tahoma, Geneva, sans-serif;
}

更新 2:

このレイヤー（つまりフッター）の前に、別のレイヤーがあります：

<div class="mainPage center width990">
       ....
</div>

CSS コードは次のとおりです。

.mainPage {
    min-height: 800px;
    padding: 5px;
}

.width990 {
    width: 990px;
}

.center {
    margin: 0px auto;
}

padding問題から削除すると.mainPage問題が解決します！しかし、このレイヤー ( ) は の親ではなく、の後です!width.width990.mainPage#footer#footer.mainPage

これはバグですか？