达到最大宽度后CSS百分比水平填充不相对于元素？

Question

我正在开发我的新投资组合网站 (http://www.marcial.is)，但我对一个无法解释的填充问题感到困惑。我构建布局的方式是每行内容都包含一个外包装和一个内包装。例如：

<header class="global-header" role="banner">
    <div class="header-inner">...</div>
</header>

外包装是 100% 宽。内部包装器有一个最大宽度，以自动边距为中心。内部包装器还具有一定百分比的填充，以允许我在每一行上看到内容（例如上面的标题示例）。这是我的 SCSS 示例来说明：

.global-header {
    background: #007bc4;
    text-align: center;
    text-shadow: 0 1px 1px rgba(#000, 0.2);
    border-bottom: 1px solid rgba(#000, 0.15);
    padding: 1.25em 0.625em 2.5em;
    @include at-break($breakMedium) {
        padding: 3.125em 1.25em 6.25em;
    }
    @include at-break($breakLarge) {
        padding: 3.125em $gutter 6.25em;
    }
}

.header-inner {
    max-width: $maxWidth; 
    margin: 0 auto;
    @include at-break($breakSmall) {
        margin: 0 18.181818181818%;
    }
    @include at-break($breakMedium) {
        margin: 0 11.764705882353%;
    }
    @include at-break($breakLarge) {
        margin: 0 17.391304347826%;
    }
}

问题在于，尽管内部包装器已经达到了应用的最大宽度，但内部包装器上的填充百分比似乎在继续增加。如果达到最大宽度，为什么内包装的填充会随着视口宽度继续增加？

Answer 1

如果达到了最大宽度，为什么内包装的填充会随着视口宽度继续增加？

因为，http://www.w3.org/TR/CSS21/box.html#padding-properties：

百分比是根据生成框的包含块的宽度计算的，[…]

您的外部div 在此处提供containing block。

您需要在此处使用.header-inner 内的附加元素，并将填充应用到，以便具有max-width 集的.header-inner 成为该元素的包含块内部元素。