android上的HTML右边缘溢出

我目前正在用HTML/JS开发一个数独解题应用程序。编程部分或多或少已经完成了，但由于在网页设计方面几乎没有经验，我的应用程序的布局似乎搞砸了

以下是我的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%更改为恒定的像素宽度，但它似乎不起作用。任何帮助都将不胜感激。谢谢

---

顺便说一句，请随意挑剔，并对我的代码提出任何改进建议。我还是新手，所以我想更多地了解什么是完成事情的最佳方式

正文有浏览器默认的边距。请尝试通过指定

body { margin: 0px; }

如果仍不起作用，请删除margin:0px auto属性并设置margins