レイアウトがインナーからはみ出してしまうので、インナー内に収めたい

インナー用にCSSを使って要素を中央揃えにしているのですが、インナーを基準にその子要素のwidthを100%にしているのに、インナーをはみ出してモニターの右側まではみ出してしまいます。（画像参照）
色々と試したところ子要素に対して設定しているpaddingの影響でこのような現象が起きているのではないかという仮説を立てることができました。（paddingをコメントアウトするとこの現象が失くなるため）
しかし、今後インナー内で要素を収め、paddingを使うことを考えると一概にpaddngを削除するということでは非常に効率が悪くなると思うので別の方法を探しているのですが、根本的にこの現象を解決する方法があれば教えていただきたいです。
また、SEO的にsectionタグをinnnerのdivタグで囲うのはまずいでしょうか？

HTML
1<div class="inner">
2      <div class="mainvisual"></div>
3      <div class="induction"></div>
4      <section class="inner section__about">
5        <h1 class="heading section__h1">ABOUT</h1>
6        <div class="section-graybox">
7          <p class="section-graybox__paragraph">
8            私たちの社会は、10年前、100年前、あるいは1000年前よりも確実に進化しています。科学こそが社会を進化させ、幸せをつくり出したのだと信じています。科学は与えられるものではなく、私たち自身が開拓し、進化させていくものです。144Labは、科学に触れ、さらなる開拓と進化に参加する人々を、ちょっとだけお手伝いします。</p>
9        </div>
10        <button class="button section-graybox__button">
11          ああああ
12        </button>
13      </section>

CSS
1.inner{
2  position: relative;
3  width: 980px;
4  margin: auto;
5  padding: 0.000001px;
6  padding-right: 1px;
7}
8.section-graybox{
9  z-index: 1;
10  width: 100%;
11  height: 100px;
12  background-color: #F2F3F7;
13  padding-top: 66px;
14  padding-right: 55px;
15  padding-bottom: 62px;
16  padding-left: 66px;
17}
18.section-graybox__paragraph{
19  font-size: 17px;
20  letter-spacing: 0.02em;
21  line-height: 2;
22}
23.button{
24  width: 157px;
25  height: 35px;
26  position: relative;
27  background-color: #D4004E;
28  text-align: center;
29  color: #FFFFFF;
30  border: none;
31}
32.button::after{
33  content: '';
34  width: 5px;
35  height: 10px;
36}