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

Question

I am learning the basics of responsive design, and started from scratch. I want a very simple page with no margin on the sides. Yet on an iphone, the site has still a fairly big white margin left and right. This is the CSS i have so far:
div#header_image img{
max-width:100%;
}
div#chart img{
max-width:100%;
}
div#Chart_place{
margin-bottom:2em;
}
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
}
#media screen and (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 I do wrong?

Answer 1

EDIT/UPDATE: Since my previous answer is not what you where 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 you go, no margins on 800px or less.
See it here: http://jsfiddle.net/fCzT9/
Full screen: http://jsfiddle.net/fCzT9/embedded/result/
Previous answer:
In your CSS you have:
#media screen and (min-width: 800px) {
div#container{
width:800px;
margin: 0 auto;
}
This will be applied for every device with a screen that is at least 800px. You have declared the width with a fixed 800px and margin: 0 auto will center that container with 800px in the screen. Take into account that your device might have a high density screen (called Retina in iPhones).
The solution to your problem depends on how your layout is based, but try this:
#media screen and (min-width: 800px) {
div#container{
width: 100%;
max-width: 80em;
margin: 0 auto;
}
This way, the maximun width will be 80 times the base font-size, 16px, resulting in 1280px. As the width is declared with 100%, it will take the available width in the screen. If the screen is bigger than 1280px, it won't go beyond it since it's the max-width.
Note: If you are not using box-sizing: border-box, if you add padding to the class which already has width:100%, the padding will be added as an extra to the element's resulting width which will cause it to go beyond the max-width and in small screens you will be able to side scroll your pages = not good.