Following is my code
<code>body {
margin: 0;
border: 2px solid blue;
}
div {
background-color: rgba(0,0,0, 0.1);
width: 950px;
margin: 0 auto;
padding: 3em;
}
@media screen and (max-width: 950px) {
div {
width: auto;
}
}</code>
<code>body {
margin: 0;
border: 2px solid blue;
}
div {
background-color: rgba(0,0,0, 0.1);
width: 950px;
margin: 0 auto;
padding: 3em;
}
@media screen and (max-width: 950px) {
div {
width: auto;
}
}</code>
body {
margin: 0;
border: 2px solid blue;
}
div {
background-color: rgba(0,0,0, 0.1);
width: 950px;
margin: 0 auto;
padding: 3em;
}
@media screen and (max-width: 950px) {
div {
width: auto;
}
}<code><div></div></code>
<code><div></div></code>
<div></div>I want to see how media query is working. So, if I reduce the viewport width, at one point, horizontal scroll bar appears and further reducing the viewport width, that bar disappears. So, when the horizontal scroll bar appears, we can see that div overflowing the body border. I have set margin: 0 on the body element. So, what is happening ?