スマホのレスポンシブ化で余白が出来るのですが、、no.1

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2">
6  <link rel="stylesheet" type="text/css" href="practice11.css">
7  
8  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9  <title>practice11</title>
10</head>
11
12<body>
13  <header>
14    <div class="inner">
15      <div class="header-logo"><a href="https://xeory.jp/extension">XeoryExtension</a></div>
16      <div class="menu">
17        <div class="menu1"><a href="https://xeory.jp/extension/sample">記事ページサンプル</a></div>
18        <div class="menu2"><a href="https://xeory.jp/template/xeory-extension/">Extensionをダウンロード</a></div>
19      </div>
20      <div id="page_top"><a href="#"></a></div>
21    </div>
22  </header>
23
24  <div id="section1">
25    <div class="inner">
26      <h1>Xeory Extension</h1>
27      <p>Xeory Extensionはワンコラムのサイト型テーマです。ユーザーに対して重要なコンテン<br>ツを効率的に届けられるようにデザインされています。５種類のカラーバリエーションを
28        <br>用意しています。
29      </p>
30    </div>
31  </div>
32
33  <div id="section2">
34    <div class="inner">
35      <h2 class="section2-ttl"><i class="fas fa-flag"></i>人気のある記事</h2>
36      <div class="flex-box">
37        <ul>
38          <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="num1">NO.1</p>
39            <p class="background-green">カテゴリー#1</p>
40            <p class="test">テスト投稿</p></a>
41          </li>
42          <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="num2">NO.2</p>
43            <p class="background-green">カテゴリー#1</p>
44            <p class="test">テスト投稿</p></a>
45          </li>
46          <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="num3">NO.3</p>
47            <p class="background-green">カテゴリー#1</p>
48            <p class="test">テスト投稿</p></a>
49          </li>
50          <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="num4">NO.4</p>
51            <p class="background-green">カテゴリー#1</p>
52            <p class="test">テスト投稿</p></a>
53          </li>
54          <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="num5">NO.5</p>
55            <p class="background-green">カテゴリー#1</p>
56            <p class="test">テスト投稿</p></a>
57          </li>
58        </ul>
59      </div><!--flex-box-->
60    </div>
61  </div><!--section2-->
62
63  <div id="section3">
64    <div class="inner">
65      <h2 class="section3-ttl"><i class="far fa-clock"></i>最近の投稿</h2>
66      <div class="flex-box">
67        <ul>
68          <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="date">2014<br>10/24</p>
69            <p class="background-green">カテゴリー#1</p>
70            <p class="test">テスト投稿</p></a>
71          </li>
72          <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="date">2014<br>10/24</p>
73            <p class="background-green">カテゴリー#1</p>
74            <p class="test">テスト投稿</p></a>
75          </li>
76          <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="date">2014<br>10/24</p>
77            <p class="background-green">カテゴリー#1</p>
78            <p class="test">テスト投稿</p></a>
79          </li>
80          <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="date">2014<br>10/24</p>
81            <p class="background-green">カテゴリー#1</p>
82            <p class="test">テスト投稿</p></a>
83          </li>
84          <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="date">2014<br>10/24</p>
85            <p class="background-green">カテゴリー#1</p>
86            <p class="test">テスト投稿</p></a>
87          </li>
88        </ul>
89      </div><!--flex-box-->
90    </div>
91  </div><!--section3-->
92
93  
94
95  
96</body>
97
98</html>
99

css
1.inner {
2  overflow: hidden;
3  max-width: 100%;
4}
5body {
6  margin: 0;
7  padding: 0;
8  max-width: 100%;
9  border: 1px solid red;
10}
11body a {
12  text-decoration: none;
13}
14body ul {
15  list-style: none;
16}
17
18header {
19  background-color:rgb(70,179,157,0.9);
20  position: relative;
21  height: 80px;
22  max-width: 100%;
23  margin: 0;
24}
25header a {
26  color: white;
27}
28/*PAGE TOPボタン追加*/
29#page_top{
30width: 50px;
31height: 50px;
32position: fixed;
33right: 0;
34bottom: 50px;
35background: #003a75; /*ボタンの色*/
36opacity: 0.6;
37border-radius: 50%; /*角の丸み*/
38z-index: 1005;
39}
40#page_top a{
41position: absolute;
42display: block;
43width: 50px;
44height: 50px;
45text-decoration: none;
46}
47#page_top a::before{
48font-family: "Font Awesome 5 Free";
49content: "\f102"; /*アイコン*/
50font-weight: 900;
51font-size: 25px;
52color: #fff; /*アイコンの色*/
53position: absolute;
54width: 25px;
55height: 25px;
56top: 0;
57bottom: 0;
58right: 0;
59left: 0;
60margin: auto;
61text-align: center;
62}
63
64.header-logo {
65  position: absolute;
66  font-size: 20px;
67  letter-spacing: 1px;
68  padding: 20px 60px;
69  margin: ;
70}
71.header-logo a {
72  font-weight: 100;
73}
74.menu {
75  display: table;
76  position: absolute;
77  right: 2rem;
78  font-size: 16px;
79}
80.menu1, .menu2 {
81  display: table-cell;
82  padding: 30px 30px;
83  margin: 10px;
84}
85.menu a {
86  display: block;
87}
88.menu1:hover, .menu2:hover {
89  background-color: #46B39D;
90  opacity: 0.7;
91}
92#section1 {
93  background-color: #41B29D;
94  height: 800px;
95  position: relative;
96  max-width: 100%;
97  margin: 0;
98}
99#section1 .inner {
100  color: white;
101  position: relative;
102  text-align: center;
103}
104#section1 h1 {
105  font-weight: 200;
106  font-size: 45px;
107  margin-top: 250px;
108}
109#section2 {
110  position: relative;
111  height: 490px;
112  border-bottom: 1px solid #E5E5E5;
113  background-color: #FBFBFB;
114  max-width: 100%;
115  margin: 0;
116}
117.section2-ttl i {
118  font-size: 20px;
119  margin: 10px;
120}
121.section2-ttl, .section3-ttl {
122  font-weight: 400;
123  text-align: center;
124  border-top: 1px solid #E5E5E5;
125  border-bottom: 1px solid #E5E5E5;
126  margin-top: 60px;
127  padding-top: 20px;
128  padding-bottom: 20px;
129  background-color: white;
130  max-width: 100%;
131  margin: 0;
132}
133.flex-box {
134  display: flex;
135  justify-content: center;
136  background-color: white;
137  max-width: 100%;
138  position: relative;
139}
140.flex-box ul {
141  display: flex;
142  max-width: 100%;
143  margin: 50px;
144  position: relative;
145}
146.flex-box li {
147  margin: 10px;
148  margin-top: 0;
149  padding: 0;
150  max-width: 100%;
151}
152.flex-box img {
153  width: 95%;
154  height: 60%;
155
156}
157.num1, .num2, .num3, .num4, .num5, .date {
158  color: white;
159  font-weight: 200;
160  font-size: 14px;
161  width: 40px;
162  position: absolute;
163  padding: 10px 4px 10px 6px;
164  max-width: 100%;
165  top: 0;
166  margin-top: 0;
167}
168.num1 {
169  background-color: #E3C779;
170  opacity: 0.9;
171}
172.num2 {
173  background-color: #A4ACB0;
174  opacity: 0.8;
175}
176.num3 {
177  background-color: #844E37;
178  opacity: 0.8;
179}
180.num4 {
181  background-color: #5C432A;
182  opacity: 0.8;
183}
184.num5 {
185  background-color: #5E5F4E;
186  opacity: 0.8;
187}
188.background-green {
189  background-color: #46B39D;
190  color: white;
191  font-size: 14px;
192  padding: 5px 10px;
193  width: 100px;
194}
195.test {
196  color: black;
197  margin: 0;
198}
199.test:hover {
200  border-bottom: 1px solid #46B39D;
201  width: 80px;
202  margin: 0;
203}
204#section3 {
205  position: relative;
206  margin-top: 0;
207  border-bottom: 1px solid #E5E5E5;
208  height: 480px;
209}
210.section3-ttl {
211  margin-top: 40px;
212}
213
214

前提・実現したいこと

今現在スマホ用にレスポンシブ対応を行なっているのですが、画面のサイズをpc用から少しでも小さくすると右側に余白ができてしまいます。
google検証でスマホ用の画面で見ても大きく右に余白が出来てしまいます。
display: block;やflexのcolumnを試しましたが縦にもなりません。
pc用のcssに問題があると思うのですが、どうでしょうか？配置について間違っているところを教えていただきたいです。またその他問題があれば教えていただけると幸いです。
よろしくお願いいたします！