css - Div tags extending beyond their own margins -

i have weird issue occurs regardless of browser (chrome, ie, opera mobile emulator i've tried). have divs nested within 2 other divs, shown below. these divs set 100% width. innermost element drifts outside of (but stays "under") parent divs. i'm not floating anything, don't see why doing this. using overflow: hidden has no effect see. image below shows google chrome's inspect element feature, shows element , padding extending beyond margins (shown in peach color). want within margins should be. i'm starting think may media queries i'm doing. using these because single percentage width won't give me exact width want. it's shamefully stupid on behalf, has ever seen this?

css

@media , (max-width:960px) {.container{width: 900px; } }  @media , (max-width:1280px) {.container{width: 1024px; }}  /*more media queries few other max resolutions*/  .container {   height: auto;   min-width: 300px;   max-width: 1440px;   margin: 20px auto 0px auto;   border: 2px solid #13192d; }  .midwrapper {   padding: 0px 12px;   margin: 12px 8px 8px 8px;   min-height: 420px; }  .innermost {   width: 100%;   margin: 8px auto;   padding: 8px 8px;   border: 2px solid #13192d; }  

add

box-sizing: border-box; -moz-box-sizing: border-box; 

to

.innermost