Problème de background avec css

Bonjour,



Je suis actuellement en train de créer un site internet pour mon activité et j'ai un soucis avec mon image de fond. Je débute dans le langage html et css et il y a sans doute des erreurs dans mon fichier css.
Quand ma page internet est sur tout mon écran je n'ai aucun soucis mais quand je mets ma page internet sur le côté avec windows 7 pour avoir ma page réduite de moitié mon fond est décalé vers la gauche et n'est pas complet. Mon image de fond fait 1108x1200 px.

Voici mes données css :
*{font-family: arial; /*appliqué à tout*/
background-repeat: no-repeat;
margin:auto} /*marge extérieure*/
h1{color: #3300FF; /*uniquement titre 1*/
margin: 0.5em auto;
padding-left: 12em; /*marge intérieure*/
font-size: 25px}
h2{color: #FF6600; /*uniquement titre 2*/
font-size: 22px;
background-image: url('none');
background-color: transparent;
margin: 1em auto;
padding-left: 15em}
li {font-size: 18px; /*mise en page des niveaux 1 (puces)*/
margin-left: 20em;
width: 56%;
text-align: justify;
padding-bottom: 1em;
padding-left: 1em;
list-style-image : url(Images/puce3.jpg)}
li li { /*mise en page des niveaux 2 (puces)*/
font-size: 14px;
margin-left: 0em;
width: 99%;
text-align: justify;
margin-top: 1em;
list-style-image : url(Images/puce2.jpg)}
p {margin-left: 15em;
padding-bottom: 2em;
padding-left: 4em;
font-size: 18px;
text-align: justify;
width: 60%;
min-width: 400px;
padding-top: 1em}
body {background-repeat: no repeat;
background-position: center;
margin: 0 auto;
background-image: url('images/fond4.jpg');
font-size: 10pt;
color: #3F3F3F;
font-family: Century Gothic, Sans-Serif}
a[href] {color: black; /*pour les liens vers d'autres pages'*/
text-decoration: underline;}
a[name]{/*aucun style particulier*/}
#carte {margin-left: 30em;
margin-bottom: 2em}
#contenu {margin: 80px 50px 50px 50px;
height: 70em; /*permet de donner une hauteur au contenu pour que le pied de page reste en bas de la page*/}
#entete {margin-top: 2em}
#fond.contenu {margin : 0px 200px 0px 300px;
background-image: url('images/fond.contenu.1.png')}
#image{float: left;
margin-left: 13em;
margin-top: 0em;
position: absolute}
div#menu{width: 10.2em; /*le menu*/
margin: 0em;
float: left;
text-align: center;
color: black;
background-color: #cfdded;
border-radius: 10px;
margin-left: 8em}
div#menu ul {padding: 1em; /*pour la première liste*/
width: 130px;
border: 1px outset;
margin: 0px;
border-radius: 10px;
background-color: #CCE6FF;
position: absolute}
div#menu ul ul {display: none; /*pour la 2e liste*/
position: absolute;
padding: 2em;
top: 0;
left: 7.7em;
margin: 0;
padding: 0;
border: 1px outset black;
background-color: #cfdded;
width: 6.9em}
div#menu ul ul ul {left: 9em;
width: 8.9em;
background-color: #cfdded;}
div#menu li {position: relative; /*style du premier niveau*/
list-style: none;
border-bottom: 1px outset;
width: 96px;
padding: 1em;
margin: 0px;
background-color: #CCE6FF;}
div#menu li a {text-decoration: none}
div#menu li:hover {background-color: #CCCCFF}
div#menu ul.niveau1 li:hover ul.niveau2 {display: block;
background-color: #FFFFFF}
div#menu ul.niveau2 li:hover ul.niveau3 {display: block;
background-color: #FFFFFF}
#menu .actuel {font-weight: bold;
text-decoration: underline;
background-color: none}
#menu a:visited {color: #3D3D3D}
#nom {text-align: center;
font-size: 50px;
font-family: "freestyle script";
color: #ffab00;
background-color: #3D7EFF;
width: 10em;
background-position:center;
border-radius: 10px;
margin-right: 6em;
border: 1px outset black;
box-shadow: 8px 8px 5px #aaa;
position: relative;
margin-left: 10em}
#pied{clear: both; /*pied de page*/
font-size: 12px;
height: 60px;
text-align: center;
color: black;
position: absolute; top: 90em; left: 40%}
#question {text-align: center;
margin-left: 10em;
font-size: 24px}


Je vous remercie par avance pour le temps passer à regarder mes données.