レスポンシブ対応時に右側に余白ができない

本来なら.containerで記述している余白ができるはずなのですができません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Furniture Design</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8    <link rel="stylesheet" href="css/style19.css">
9    <script src="jquery-3.6.0.min.js"></script>
10    <script src="js/main.js"></script>
11  </head>
12  <body>
13    <div class="container">
14      <header id="header">
15        <div class="flex">
16        <h1 class="site-title">
17          <a href="index19.html"><img src="images/logo.svg" alt=""></a>
18        </h1>
19        <nav id="navi" class="header-list">
20          <ul class="nav-menu">
21            <li><a href="product1.html">PRODUCT</a></li>
22            <li><a href="about.html">ABOUT</a></li>
23            <li><a href="company.html">COMPANY</a></li>
24            <li><a href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">CONTACT</a></li>
25          </ul>
26        </nav>
27        <div class="toogle-btn">
28          <span></span>
29          <span></span>
30        </div>
31        </div>
32        <div id="mask"></div>
33      </header>
34      <main id="main">
35        <div class="company-top">
36          <h3 class="page-title">Company</h3>
37          <dl class="company-list">
38            <dt>社名</dt>
39            <dd>株式会社ファニチャーデザイン</dd>
40            <dt>住所</dt>
41            <dd>〒107-0062 東京都港区南青山１丁目××××××</dd>
42            <dt>設立</dt>
43            <dd>XXXX年XX月</dd>
44            <dt>資本金</dt>
45            <dd>XXXX万円</dd>
46            <dt>従業員数</dt>
47            <dd>XX名</dd>
48            <dt>事業内容</dt>
49            <dd>
50              家具、インテリアの企画・生産
51              <br>家具、インテリアの販売
52              <br>店舗の企画・デザイン・設計
53            </dd>
54          </dl>
55        </div>
56        <div class="adress">
57          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6482.583235229447!2d139.7212272467876!3d35.66982087039893!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c820ac932eb%3A0xc68079dd10afd971!2z44CSMTA3LTAwNjIg5p2x5Lqs6YO95riv5Yy65Y2X6Z2S5bGx77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1634529358242!5m2!1sja!2sjp" width="600" height="315" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
58        </div>
59      </main>
60      <footer id="footer">
61        <div class="footer-list">
62          <ul>
63            <li>
64              <a href="https://www.instagram.com/">Instagram</a>
65            </li>
66            <li>
67              <a href="https://twitter.com/">Twitter</a>
68            </li>
69            <li>
70              <a href="https://www.facebook.com/">Facebook</a>
71            </li>
72          </ul>
73        </div>
74        <p>© Furniture Design</p>
75      </footer>
76    </div>
77  </body>
78</html>
79
80-----------------css-------------------
81@charset "UTF-8";
82html {
83  font-size: 100%;
84}
85img {
86  max-width: 100%;
87}
88body {
89  color: #333;
90  background-color: white;
91  padding-top: 80px;
92  position: relative;
93}
94a {
95  color: #000;
96  text-decoration: none;
97}
98a:hover {
99  opacity:.5;
100  transition: all .5s;
101}
102li {
103  list-style: none;
104}
105.container {
106  width: 1340px;
107  max-width: 100%;
108  padding: 0 4%;
109  margin: 0 auto;
110}
111.site-title {
112  width: 180px;
113  margin: 0 4%;
114}
115.item-title {
116  font-size: 12px;
117  font-weight: 400;
118}
119/*company.html*/
120#main .company-top {
121  max-width: 600px;
122}
123#main .company-list {
124  font-size: 14px;
125  display: flex;
126  flex-wrap: wrap;
127  margin-bottom: 30px;
128  width: 100%;
129}
130#main .company-list dt {
131  width: 31%;
132  padding: 20px 10px;
133  border-bottom: solid 1px #c8c8c8;
134}
135#main .company-list dd {
136  width: 69%;
137  padding: 20px 10px;
138  border-bottom: solid 1px #c8c8c8;
139}
140#main .company-list dd:last-child {
141  border: 0;
142}
143#main .company-list dt:nth-child(11) {
144  border: 0;
145}
146#main iframe {
147  filter:grayscale(1);
148  -webkit-filter:grayscale(1);
149}
150@media screen and (max-width: 900px) {
151  /*company.html*/
152  #main .company-list dt {
153    border: none;
154    width: 100%;
155    padding-bottom: 16px;
156  }
157  #main .company-list dd {
158    width: 100%;
159    padding-top: 0;
160  }
161  #main .company-list {
162    flex-direction: column;
163  }
164  #footer {
165    flex-direction: column;
166  }
167  #footer p {
168    padding-top: 10px;
169}

試したこと

手当たり次第、width、max-widthの値を変えて試してみたもですが余白ができず横のスクロールができてしまいました

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

このファイルはいくつかのページの一部分で他のファイルではしっかり余白ができました

Lhankor_Mhy

2021/10/19 02:10

・スクリーンサイズがいくつの時に問題が起きますか？・「.containerで記述している余白」とはどれのことですか？ padding: 0 4% ですか？

行動規範の内容に同意します

回答1件

ベストアンサー

padding: 0 4%;のことを言っているなら、
max-width: 100%;としているので、.container の幅が108%となり8%分画面からはみだします。
横スクロールバーが出ているのでスクロールすると右側の余白が出てきます。

max-width: 92%;と左右余白分引いておくか、
box-sizing: border-box;としてサイズの計算法に余白や境界線も含むようにすればいいでしょう。

css
1.container {
2    width: 1340px;
3    max-width: 100%;
4    padding: 0 4%;
5    margin: 0 auto;
6    box-sizing: border-box; /* 追加 */
7}

投稿2021/10/19 02:44

編集2021/10/19 02:44

hatena19

総合スコア34075

zuru17830405

2021/10/19 04:12

ありがとうございました！！できましたわかりやすくて初心者の僕でもすぐに修正できたので本当に助かりました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブ対応時に右側に余白ができない