css - 无法解决移动设备的溢出问题

Question

我不确定这里应该包括什么， 我检查了网站上的每个 width，但无法弄清楚为什么我在移动设备上看到我的网站右边有空白。

这是链接 http://m.mdmobile.hailstorm-technologies.com/ 我试过了

overflow:hidden; 在 body 和 html css 中，虽然这解决了移动设备上的问题，但我无法向下滚动桌面。

我已经为 body 和 html 尝试了 overflow-x:hidden 并且再一次，这适用于移动设备，但增加了第二个垂直滚动条到缩小的桌面浏览器上。

html{

margin: 0;
padding: 0;
width:100%;
overflow-x:hidden;



}

body { 
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-image: url('../image/background-pattern.jpg'); 
width:100%;
overflow-x:hidden;  


}

我还包括了这个...

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">       

Answer 1

下面一行导致了这个

#header #welcome {
float: left; /* remove this */
z-index: 5;
text-align: left;
color: #006f51;
position: relative;
}

编辑:还有一些利润，也删除它

#header #cart .heading a {
color: #006f51;
text-decoration: none;
float: right;
text-decoration: underline;
margin-right: -10px; /* remove this  */
padding: 6px 10px 6px 30px;
clear: both;
font-size: 17px;
}