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％更改为恒定像素宽度，但它似乎不起作用。任何帮助将非常感激。谢谢！

P.S。请随意挑剔并建议对我的代码进行任何改进。我还是新手，所以我想了解更多关于＆＃34;最好的＆＃34;把事情做好的方法！

Answer 1

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

重置它

body { margin: 0px; }

如果仍然无效，请删除保证金：0px auto属性并设置保证金