HTML右邊緣在Android上溢出

Question

我目前正在使用HTML / JS開發Sudoku解決方案應用程序。 編程部分或多或少已經完成，但是由於很少或沒有網頁設計經驗，因此我的應用程序布局似乎越來越混亂。

這是我的CSS樣式：

body{
    background-color: #faf8ef;
}

.container{
    width: 436px;
    margin:0px auto;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}

.heading_container{
    width: 436px;
    margin-bottom: 5px;
}

.heading_title{
    width: 436px;
    margin:0 auto;
    text-align: center;
}

.heading_info{
    width: 436px;
    margin:0 auto;
    text-align: center;
}

.main-grid{
    width: 436px;
    background-color: #bbada0;
    border-radius: 2px;
    padding: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    clear:both;
}

.big-grid{
}

.small-grid{
    width:43px;
    height:43px;
    border:1px gray;
    border-radius:3px;
    text-align: center;
    font-size: 17px;
    overflow: hidden;
}

這是我的HTML代碼：

<div class="container">

    <div class="heading_container">
        <div class="heading_title"><span style="font-family:verdana; font-size: 50px; font-weight: bold">Sudoku Solver</span></div>
    </div>

    <table class="main-grid" cellspacing="2px">
    ...
    </table>
</div>

當我在桌面和Android移動設備上運行它時，會發生以下情況：

它可以在桌面上正常運行，但是當我在Android上運行時，網格的右邊緣似乎被切斷了。 我懷疑這是一個溢出的問題，並嘗試將寬度從100％更改為恆定的像素寬度，但似乎不起作用。 任何幫助將不勝感激。 謝謝！

PS不要隨意挑剔，並建議對我的代碼進行任何改進。 我還很新，所以我想了解更多有關完成工作的“最佳”方法的知識！

Answer 1

瀏覽器的正文具有默認的邊距。嘗試通過指定將其重置

body { margin: 0px; }

如果仍然無效，請刪除margin：0px auto屬性並設置邊距