css - Why do I still have a margin around my body on mobile? -

i learning basics of responsive design, , started scratch. want simple page no margin on sides. yet on iphone, site has still big white margin left , right. css have far:

    div#header_image img{         max-width:100%;     }     div#chart img{         max-width:100%;     }     div#chart_place{         margin-bottom:2em;      }      @media screen , (min-width: 800px) {         div#container{             width:800px;             margin: 0 auto;         }     }      @media screen , (max-width: 800px) {         div#container{             width:max-width;             margin: 0;             padding: 0;         }        }      body{         font-family:verdana, geneva, sans-serif;         margin:0;      }     h1{         font-size: 1.5em;         margin-top:2em;         margin-bottom:2em;     }      ul{background-color:white;}      div#feesboek_button{     }     input[type='text'], textarea {font-size:16px;} 

what do wrong?

edit/update: since previous answer not looking for, use this:

html,body { margin:0; padding: 0; }  #container {   max-width: 800px;   padding: 0;   margin: 0 auto;    /*for ilustration purposes*/   background-color: #f13700; }  @media (max-width: 800px) {   #container {     padding: 0;     margin: 0;   } } 

there go, no margins on 800px or less.

see here: http://jsfiddle.net/fczt9/ full screen: http://jsfiddle.net/fczt9/embedded/result/

---

previous answer:

in css have:

@media screen , (min-width: 800px) {     div#container{         width:800px;         margin: 0 auto; } 

this applied every device screen @ least 800px. have declared width fixed 800px , margin: 0 auto center container 800px in screen. take account device might have high density screen (called retina in iphones).

the solution problem depends on how layout based, try this:

@media screen , (min-width: 800px) {     div#container{         width: 100%;         max-width: 80em;         margin: 0 auto; } 

this way, maximun width 80 times base font-size, 16px, resulting in 1280px. width declared 100%, take available width in screen. if screen bigger 1280px, won't go beyond since it's max-width.

note: if not using box-sizing: border-box, if add padding class has width:100%, padding added element's resulting width cause go beyond max-width , in small screens able side scroll pages = not good.