内部 div 变得大于外部并超出浏览器边框，填充右侧不起作用答案

【问题标题】：Inner div becomes larger than outer and overshoots browser border, padding-right not working内部 div 变得大于外部并超出浏览器边框，填充右侧不起作用
【发布时间】：2020-08-21 17:14:56
【问题描述】：

我有 2 个 div，父 div 宽度为 100%，内部 75rem，因此，如果您增加浏览器宽度，文本将保持在中心。喜欢这里：www.profimetall.de 或 www.pip-laser.de（导航栏）。

现在我想减小浏览器的宽度并给两个 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 黄色：内部

【问题讨论】：

标签： html css overflow

【解决方案1】：

有一些错别字：

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

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

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

【讨论】：