How to override width without setting to 100%? - css

Question

How do I override the width of #mydiv in the media query so it is basically 100%? If I explicitly set it to 100% that will push padding outside of the div, creating horizontally scrolling on a smaller screen.
In Safari Developer Tools style pane, I can uncheck width:800px and everything looks fine at the smaller screen. How do I translate that into code? What is the uncheck/toggle doing to width in code?
#mydiv {
width:800px;
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
}

Answer 1

As requested, publishing:
Simply apply box-sizing:border-box; to your CSS for the item, and it will fit width:100%; just fine.
As a side note, you should consider applying it to everything at the top of your CSS:
* {
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* iOS4, < Android 3.0 */
box-sizing:border-box;
}
There is a great article here about the many advantages (for one, it works all the way back to IE8). I personally use it on all my projects, never fails me.

Answer 2

You could use box-sizing, however, you could also use any of the following as well:
#mydiv {
width:800px;
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
width:auto; /* this will put the width back */
}
or
#mydiv {
max-width:800px; /* this will constrain the width to a maximum of 800, but will have a different effect for widths between 800px and 450px */
margin: 0 auto;
}
#media screen and (max-width:450px){
padding:10px;
}