I have a weird issue that occurs regardless of browser (Chrome, IE, Opera Mobile Emulator are what I've tried). I have divs nested within two other divs, as shown below. These divs are all set to 100% width. The innermost element drifts outside of (but stays "under") the parent divs. I'm not floating anything, so I don't see why it is doing this. Using overflow: hidden has no effect that I could see. The image below shows Google Chrome's inspect element feature, which shows the element and padding extending beyond the margins (shown in the peach color). I want everything to be within the margins as it should be. I'm starting to think it may be something with the media queries I'm doing. I am using these because a single percentage width won't always give me the exact width I want. It's probably something shamefully stupid on my behalf, but has anyone ever seen anything like this?
CSS
@media all and (max-width:960px)
{.container{width: 900px; } }
@media all and (max-width:1280px)
{.container{width: 1024px; }}
/*More media queries for a 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;
}
