Probleme marge blanche sur mobile

bonjour

donc voila mon problème

mon site marche trés bien en visuel sur les résolution pc

par contre sur portable voila ce que ça donne
http://hpics.li/ba60c50

et sur ordinateur sa donne en dezooman a fond

http://hpics.li/e2b174e

pourtant il n'y a aucun décalage sur ordinateur et , quand j'enleve l'image il n'y a plus de marge sur mobile !

j'ai chercher et chercher je ne comprend pas

voici le code

body {
background:url("background.png");
background-repeat:repeat;

}

#banniere
{
background-image:url("imagetest.png");
width:1024px;
height:227px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
z-index:0;

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>

<div id="banniere">
</div>

</body>
</html>