ne peut pas résoudre le problème de débordement pour mobile

Question

Je ne sais pas quoi inclure ici, J'ai parcouru tous les width sur le site et je n'arrive pas à comprendre pourquoi je vois mon site avec une marge sur la droite sur les appareils mobiles.

Voici un lien http://m.mdmobile.hailstorm-technologies.com/ J'ai essayé

overflow:hidden; dans le body et html css, et tout cela résout le problème sur le mobile Je ne peux pas faire défiler vers le bas sur le bureau.

J'ai essayé overflow-x:hidden pour body et html et encore une fois, cela fonctionne pour le mobile, mais ajoute une deuxième barre de défilement verticale sur le navigateur de bureau rétréci.

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; 


} 

Ive a également inclus cette ...

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

Answer 1

La ligne suivante est à l'origine de cette

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

EDIT: encore une certaine marge là, supprimer ce aswell

#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; 
}