Android 上的 HTML 右边缘溢出

Question

我目前正在使用 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% 更改为恒定像素宽度，但它似乎不起作用。任何帮助将不胜感激。谢谢!

附言请随意挑剔并建议对我的代码进行任何改进。我还是新手，所以我想更多地了解什么是完成任务的“最佳”方法!

Answer 1

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

body { margin: 0px; }

如果还是不行，移除 margin:0px auto 属性并设置边距