Div标签超出了自己的边距

Question

我有一个奇怪的问题，无论浏览器发生（Chrome，IE，Opera Mobile Emulator都是我尝试过的）。我有div嵌套在另外两个div中，如下所示。这些div都设置为100％宽度。最里面的元素在父div之外漂移（但保持在“under”之下）。我没有漂浮任何东西，所以我不明白为什么这样做。使用溢出：隐藏没有我能看到的效果。下图显示了Google Chrome的检查元素功能，该功能显示元素和填充超出边距（以桃色显示）。我希望一切都在应有的边缘内。我开始认为这可能与我正在做的媒体查询有关。我正在使用这些，因为单个百分比宽度并不总能给我我想要的确切宽度。这对我来说可能是一件非常愚蠢的事，但有没有人见过这样的事情？

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;
} 

Answer 1

添加

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

到

.innermost