内部 div 变得比外部大并且超过浏览器边框，padding-right 不起作用

Question

我有 2 divs 父 div 是 100% 宽度和内部 75rem，因此，如果您增加浏览器宽度，文本将留在中间。喜欢这里：www.profimetall.de or www.pip-laser.de (navbar).

现在我想减小浏览器宽度并给两个 div 宽度 100%，但内部应该与外部之间有一个间隙。左边没有问题，而是右侧。当我减小浏览器宽度时，div 变宽并且底部的滚动条弹出。

HTML:

<div class="outer">
 <div class="inner">
 </div>

CSS:

.outer {width: 100%; height: auto, position: relative;}
.inner {width: 75rem; height:300px; position: relative; margin: 0 auto;}

CSS: (最大宽度: 80rem)

.inner {width: 100%; padding-right: 40px; padding-left: 40px;

媒体查询后应该是这样的：

https://i.stack.imgur.com/m6S8Z.png

灰色：外层div 黄色：内部

Answer 1

有一些错别字：

height: auto, 应该是：height: auto;

显然最后一个 .inner 丢失了 }.

但对于手头的问题，请尝试将 box-sizing:border-box; 添加到 .inner。这应该考虑填充。

Inner div becomes larger than outer and overshoots browser border, padding-right not working