具有相同最大宽度的2个div显示不同的宽度

Question

红色框的div以及绿色框和紫色框的div都设置为相同的最大宽度75rem。我为红色框在宽萤幕上伸展时如何显示近1250像素的最大宽度而感到困惑。

JSFiddle

我正在将此辅助程序类应用于两个div。

.wrapper {
margin: auto;
max-width: 75rem;
}

Answer 1

将CSS box-sizing:border-box添加到您的.hero将解决此问题。

会发生什么

由于.hero的左右两侧都有20px的空白。您的整个div变为75rem + 40px

box-sizing:border-box确保在宽度中包括填充。因此，您的div的实际宽度将变为75rem-40px

有关包装盒尺寸的更多信息：https://www.w3schools.com/css/css3_box-sizing.asp