Внутренний div становится больше внешнего и выходит за пределы границы браузера, padding-right не работает

Question

У меня есть 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: (max-width: 80rem)

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

После медиа-запроса ie должно получиться так:

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

серый: внешний div желтый: внутренний

Answer 1

Есть несколько опечаток:

height: auto, должно быть: height: auto;

и, очевидно, отсутствует последний .inner }.

Но к проблема, попробуйте добавить box-sizing:border-box; к .inner. Это должно учитывать отступы.