html 子div是什么意思,html – 为什么子div超出了它们的父div？

我觉得这很愚蠢,但这是一个非常简单的问题,不明白如何解决.在下面的代码中,为什么容器,主要和辅助div扩展到标题之外？我知道它是因为我已经分配给容器的填充而发生的,但我已经为html元素分配了最大宽度. header元素遵循最大宽度,但容器及其子div不是.我在这里看过类似的问题,但没有看到任何我认为与我的特殊情况相关的问题.这里发生了什么？

谢谢.

的test.html

Test

html {

max-width: 960px;

margin: 0 auto;

position: relative;

}

header {

height: 2.5em;

background: #2a3744;

color: #fff;

}

body {

font-size: 100%;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

.container {

width: 100%;

padding: 1em;

margin: 0 auto;

background: #ccc;

}

.main { background: #cf6; }

.secondary { background: #fc6; }

header

main

secondary