inner（コンテナ）幅は可変で、左右の余白のみpxで指定する方法は？

前提・実現したいこと

htmlの余白をなくしたいです
max-width: 1400px;なのにその外側によはくができてしまっています.
これは、あくまでもデモサイト作成のため、何卒宜しくお願い致します。m(__)m

該当のソースコード

htmlはこちらのURLです。
html

](f4604fa5599fc43e4b09d8ae1a0d2e6d.jpeg)

css
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5
6body {
7  max-width: 1400px;
8  background-color: #F0F0F0;
9  font-size: 1.4rem;
10  color: #000;
11  font-family: Merio;
12  margin: 0;
13}
14
15img {
16  max-width: 100%;
17  height: auto;
18  vertical-align: bottom;
19}
20
21a {
22  color: #000;
23  font-size: 1.4rem;
24  text-decoration: none;
25}
26
27li {
28  list-style: none;
29}
30
31.logo {
32  width: 100px;
33  line-height: 1;
34  margin-right: 60px;
35  margin-left: 91px;
36}
37
38.content-wrapper {
39  max-width: 1000px;
40}
41
42/*タイトル*/
43.section-title {
44  font-weight: normal;
45  line-height: 1;
46  margin-bottom: 50px;
47}
48
49.section-title::after {
50  content: "";
51  width: 40px;
52  height: 1;
53  background-color: #000;
54  display: block;
55}
56
57.en-title {
58  font-size: 3.6rem;
59  letter-spacing: 0.3em;
60  margin-bottom: 10px;
61  text-transform: uppercase;
62}
63
64.jp-title {
65  display: block;
66  font-size: 1.4rem;
67  margin-bottom: 36px;
68}
69
70/*ヘッダーとフッダー共通ロゴ*/
71.logo {
72  width: 100px;
73  margin-left: 91px;
74}
75
76.header {
77  max-width: 1400px;
78  height: 80px;
79  background-color: #fff;
80}
81
82.header-flex {
83  display: -webkit-box;
84  display: -webkit-flex;
85  display: -ms-flexbox;
86  display: flex;
87}
88
89.header-flex .logo-flex {
90  display: -webkit-box;
91  display: -webkit-flex;
92  display: -ms-flexbox;
93  display: flex;
94  -webkit-box-pack: center;
95  -webkit-justify-content: center;
96      -ms-flex-pack: center;
97          justify-content: center;
98  -webkit-box-align: center;
99  -webkit-align-items: center;
100      -ms-flex-align: center;
101          align-items: center;
102  padding: 28px 60px 28px 91px;
103}
104
105.header-flex .logo-flex .nav .header-list {
106  display: -webkit-box;
107  display: -webkit-flex;
108  display: -ms-flexbox;
109  display: flex;
110  -webkit-box-pack: center;
111  -webkit-justify-content: center;
112      -ms-flex-pack: center;
113          justify-content: center;
114  -webkit-box-align: center;
115  -webkit-align-items: center;
116      -ms-flex-align: center;
117          align-items: center;
118}
119
120.header-flex .logo-flex .nav .header-list .list-item {
121  margin-left: 60px;
122}
123
124.header-flex .logo-flex .nav .header-list .list-item + .list-item {
125  margin-left: 30px;
126}
127
128.header-flex .header-link {
129  width: 200px;
130  height: 80px;
131  background-color: #000000;
132  display: -webkit-box;
133  display: -webkit-flex;
134  display: -ms-flexbox;
135  display: flex;
136  -webkit-box-pack: end;
137  -webkit-justify-content: flex-end;
138      -ms-flex-pack: end;
139          justify-content: flex-end;
140  display: inline-block;
141  margin-left: 429px;
142}
143
144.header-flex .header-link > a {
145  color: #fff;
146  line-height: 80px;
147  text-align: center;
148  -webkit-box-pack: center;
149  -webkit-justify-content: center;
150      -ms-flex-pack: center;
151          justify-content: center;
152  padding: 30px 73px;
153}
154
155.news-title {
156  margin-top: 120px;
157  margin-left: 200px;
158}
159
160.news-list {
161  display: -webkit-box;
162  display: -webkit-flex;
163  display: -ms-flexbox;
164  display: flex;
165  -webkit-box-pack: justify;
166  -webkit-justify-content: space-between;
167      -ms-flex-pack: justify;
168          justify-content: space-between;
169  -webkit-box-align: center;
170  -webkit-align-items: center;
171      -ms-flex-align: center;
172          align-items: center;
173  margin-left: 200px;
174}
175
176.news-list .news-item {
177  width: calc(100%/3);
178}
179
180.news-list .news-item + .news-item {
181  border-left: 1px solid #000000;
182  padding-left: 20px;
183}
184
185.news-list .news-item .info {
186  display: -webkit-box;
187  display: -webkit-flex;
188  display: -ms-flexbox;
189  display: flex;
190  -webkit-box-align: center;
191  -webkit-align-items: center;
192      -ms-flex-align: center;
193          align-items: center;
194}
195
196.news-list .news-item .info > time {
197  padding: 20px;
198}
199
200.news-list .news-item .info .icon {
201  background: #333;
202  width: 50px;
203  height: 20px;
204  color: #fff;
205  font-size: 1.2rem;
206  text-transform: uppercase;
207  text-align: center;
208  margin-left: 10px;
209}
210
211.news-list .news-item .text {
212  padding-right: 70px;
213}
214
215.news-list .news-item .text:last-child {
216  padding-right: 0;
217}
218
219.about .about-wrapper {
220  display: -webkit-box;
221  display: -webkit-flex;
222  display: -ms-flexbox;
223  display: flex;
224  -webkit-box-orient: horizontal;
225  -webkit-box-direction: reverse;
226  -webkit-flex-direction: row-reverse;
227      -ms-flex-direction: row-reverse;
228          flex-direction: row-reverse;
229  -webkit-box-pack: justify;
230  -webkit-justify-content: space-between;
231      -ms-flex-pack: justify;
232          justify-content: space-between;
233  -webkit-box-align: center;
234  -webkit-align-items: center;
235      -ms-flex-align: center;
236          align-items: center;
237}
238
239.about .about-wrapper .about-img {
240  width: 100%;
241  width: 760px;
242  margin-top: 128px;
243  margin-bottom: 246px;
244}
245
246.text {
247  width: 481px;
248}
249
250.biz-title {
251  margin-left: 200px;
252}
253
254.biz-wrapper {
255  display: -webkit-box;
256  display: -webkit-flex;
257  display: -ms-flexbox;
258  display: flex;
259  -webkit-box-pack: justify;
260  -webkit-justify-content: space-between;
261      -ms-flex-pack: justify;
262          justify-content: space-between;
263}
264
265.biz-wrapper .biz-name1 {
266  display: -webkit-box;
267  display: -webkit-flex;
268  display: -ms-flexbox;
269  display: flex;
270  -webkit-box-orient: vertical;
271  -webkit-box-direction: normal;
272  -webkit-flex-direction: column;
273      -ms-flex-direction: column;
274          flex-direction: column;
275  margin-top: 191px;
276  margin-left: 300px;
277  margin-bottom: 120px;
278}
279
280.biz-wrapper .biz-name1 .biz-list {
281  width: 368px;
282  margin-right: 64px;
283}
284
285.biz-wrapper .biz-name1 .biz-list > p {
286  display: block;
287}
288
289.biz-wrapper .biz-name1 .biz-list .biz-img {
290  width: 100%;
291  max-width: 368px;
292}
293
294.biz-wrapper .biz-name2 {
295  display: -webkit-box;
296  display: -webkit-flex;
297  display: -ms-flexbox;
298  display: flex;
299  -webkit-box-orient: vertical;
300  -webkit-box-direction: normal;
301  -webkit-flex-direction: column;
302      -ms-flex-direction: column;
303          flex-direction: column;
304  margin-top: 91px;
305  margin-right: 300px;
306}
307
308.biz-wrapper .biz-name2 .biz-list {
309  width: 368px;
310}
311
312.biz-wrapper .biz-name2 .biz-list > p {
313  display: block;
314}
315
316.biz-wrapper .biz-name2 .biz-list .biz-img {
317  width: 100%;
318  max-width: 368px;
319}
320
321.company {
322  position: relative;
323  height: 750px;
324}
325
326.company .bg-white {
327  background-color: white;
328  width: 567px;
329  height: 640px;
330  margin-bottom: 110px;
331  margin-left: 200px;
332  position: absolute;
333  top: 0;
334  left: 0;
335}
336
337.company .bg-white .com-title {
338  padding-top: 100px;
339  padding-right: 62px;
340}
341
342.company .bg-white .com-list > a {
343  display: block;
344  display: -webkit-box;
345  display: -webkit-flex;
346  display: -ms-flexbox;
347  display: flex;
348}
349
350.company .bg-white .com-list > a .com-item {
351  display: block;
352  display: -webkit-box;
353  display: -webkit-flex;
354  display: -ms-flexbox;
355  display: flex;
356  -webkit-box-pack: justify;
357  -webkit-justify-content: space-between;
358      -ms-flex-pack: justify;
359          justify-content: space-between;
360  -webkit-box-align: center;
361  -webkit-align-items: center;
362      -ms-flex-align: center;
363          align-items: center;
364}
365
366.company .bg-white .com-list > a .com-item .name {
367  width: 42px;
368  padding-top: 10px;
369  padding-left: 62px;
370  font-size: 1.4rem;
371}
372
373.company .bg-white .com-list > a .com-item > p {
374  padding-left: 42px;
375  font-size: 1.4rem;
376}
377
378.company .bg-white .com-list > a .com-item > p > p:nth-child(n+2) {
379  padding-top: 10px;
380}
381
382.company .bg-white .com-list > a .com-item .desc {
383  display: block;
384  padding-left: 42px;
385}
386
387.company .com-img {
388  width: 53%;
389  height: 400px;
390  -o-object-fit: cover;
391     object-fit: cover;
392  position: absolute;
393  top: 115px;
394  right: 0;
395  margin-bottom: 235px;
396}
397
398.footer {
399  max-width: 1400px;
400  background-color: #fff;
401}
402
403.footer .com-flex {
404  display: -webkit-box;
405  display: -webkit-flex;
406  display: -ms-flexbox;
407  display: flex;
408  -webkit-box-pack: justify;
409  -webkit-justify-content: space-between;
410      -ms-flex-pack: justify;
411          justify-content: space-between;
412  -webkit-box-align: center;
413  -webkit-align-items: center;
414      -ms-flex-align: center;
415          align-items: center;
416}
417
418.footer .com-flex > p {
419  display: block;
420  margin-bottom: 20px;
421  margin-left: 100px;
422}
423/*# sourceMappingURL=style.css.map */

試したこと

◆確認したこと
原因を追究するために、develop toolで確認→htmlに余白ができている
→margin: 0;を設定するも、変わらないです。

補足情報（FW/ツールのバージョンなど）

↓調べた結果、出てきた質問です
https://teratail.com/questions/264550
}

itagagaki

2021/07/08 08:06

再現できませんでした。どこに余白ができるのですか？

free_teku

2021/07/08 08:51

itagakiさん、連絡ありがとうございます。現状の図を添付しましたのでご確認お願い致します！

itagagaki

2021/07/08 08:53

bodyの幅が1400pxで、ブラウザの領域の幅はもっと広いため、左側に余白ができているということですか？それなら当然のような。

free_teku

2021/07/08 10:48

ブラウザ領域の幅は指定していません。 body{max-width: 1400px}にとどめているようにしたいのですが、どこが間違っていますか？

itagagaki

2021/07/08 11:28

えーと、余白とおっしゃっているのは図の右側の灰色の部分ですか？（違うのかな…？） bodyの幅は1400pxにとどめられていて、風景の写真はそのbodyいっぱいに表示されているんですよね？つまり写真の幅が1400pxになっていて、その右側に灰色の空白があるということですよね？その灰色の部分は、ブラウザの表示領域の、body以外の部分が出ているわけですよね？

free_teku

2021/07/08 14:12

そうですね。仰る通りです。余白はグレーのところです。 bodyの外側のグレー部分の余白が気になっています。なぜ、できるのでしょうか？縦一列に余白があるのが気になります。

itagagaki

2021/07/08 14:30

どうしたいのですか？ブラウザの表示領域がグレーの部分を含めて1400px以上あるわけですよね。そしてbodyの上限を1400pxにしているのだから、残りは当然余白となるしかないですよね。 bodyを表示領域いっぱいに表示して余白をなくしたいならmax-widthの設定をやめることです。質問の題にある「左右の余白のみpxで指定する」というのも、ちょっと意味が分からないので、詳しく説明してください。

free_teku

2021/07/09 02:39

itagakiさんがおっしゃるように、bodyを表示領域いっぱいにしたいです。⇨max-widthやめます。ただ理屈がわからないです???? 質問の題は修正し直します。