HTML右边缘在android上溢出

我目前正在HTML/JS中开发一个Sudoku求解应用程序。编程部分或多或少都是最终确定的，但是在网页设计方面很少或没有经验，我的应用程序的布局似乎正在搞砸。HTML右边缘在android上溢出

这里是我的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移动设备上运行它会发生什么：

Desktop Android