サイトの右側に巨大な余白　(検証でカーソルを当てても反応なしです。)

サイトの右側にある巨大な余白が消せません。
●css
body { overflow: hidden; }
.container { overflow: hidden;}
を各々してみると、余白は大方消えたものの(少し残った)、画面のスクロールが出来なくなりました。
(※bodyとcontainerそれぞれ別々に試しました)

●containerは、bootstrap ver4のものです

どなたか原因を教えてくださるようよろしくお願いいたします。

以下、コードです。????

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Airbnbでお家、アパート、お部屋をシェアしよう
8  </title>
9  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10  <link rel="stylesheet" href="css/style.css" >
11  <link rel="icon" href="airbnbpp.png" type="image/vnd.microsoft.icon" />
12</head>
13
14<body>
15  <header>
16    <div class='logo'>
17      <img src="airbnbpp.png" alt="ロゴ">
18    </div>
19    <nav>
20      <ul>
21        <li>リスト1</li>
22        <li>リスト2</li>
23        <li>リスト3</li>
24      </ul>
25    </nav>
26  </header>
27  
28  <div class="apple">    
29    
30    <div class="card" style="width: 25rem; height: 29.5rem;" >
31      <div class="card-body">
32        <h5 class="card-title">Airbnbホストになって、暮らしをレベルアップ</h5>
33        <p class="card-text">どれくらいの収入が見込めるかチェック</p>
34  
35          
36          <input type="text" placeholder="ロケーション" class="location" value="京都">  
37  
38          <select name="stay" class="occupy">
39            <option value="a">まるまる貸切</option>
40            <option value="b">個室</option>
41            <option value="c">シェアルーム</option>
42          </select>
43  
44        
45
46        <button type="button2" class="btn btn-danger" id="btn2">はじめる</button>
47      </div>
48    </div>
49  </div>
50     
51
52<div class="all">
53    <div class="container">
54      <div class="row">
55        <div class="one col-12 col-lg-4">
56          <div class="h4">
57            Airbnbでホストするこれだけの理由</div>
58            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
59        </div>
60    
61        <div class="two col-12 col-lg-4">
62          <div class="h4">Airbnbならホストも安心安全</div>
63          <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
64          <a href="#" class="a">ホストを守るAirbnbの仕組みをチェック</a>
65        </div>
66    
67        <div class="three col-12 col-lg-4">
68          <div class="h4">ゲストは認証済みです</div>
69          <p>Airbnbは全ゲストを対象に、予約の前に一定の情報（認証済み電話番号、メールアドレスなど）の提供を求めています。 さらにご希望の場合は、ほかのホストからの推薦、認証済みIDの取得を追加要件として求めることもできます。</p>
70        </div>  
71      </div>
72    </div>
73
74    <div class="_">______</div>
75    <div class="step">3ステップでホスティング</div>
76
77  <div class="container">
78    <div class="row">
79      <div class="col-12 col-lg-4">
80        <div class="N1">1</div>
81          <div class="h4">無料でお部屋を掲載</div>
82          <p><p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p></p>
83      </div>
84
85      <div class="col-12 col-lg-4">
86        <div class="N2">2</div>
87          <div class="h4">ホスティング方法を設定</div>
88          <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p>
89      </div>
90
91      <div class="col-12 col-lg-4">
92        <div class="N3">3</div>
93          <div class="h4">はじめてのゲストが来ます！</div>
94          <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
95          <a href="#" class="a">ホストをはじめる方法をチェック</a>
96      </div>
97    </div>
98  </div>    
99
100  <div class="A">
101    <img src="../mother.jpg" alt="ホストマザー">
102      <div class="s1">
103        <p class="s2">ホスティングの収入でキッチンを新調したり、<br>他の改装費用の一部を賄うことができました」</p>
104        <p class="s3">Tessaさんはロンドン在住。<br>ホストになって経済的なゆとりができました</p>
105        <button type="button" class="btn btn-light">実践例をチェック</button>
106      </div>
107  </div>
108</div>
109
110      
111 
112
113</body>
114</html>

CSS
1header {
2  width: 1567px;
3  height: 100px;
4  z-index: 9999;
5  display: flex;
6  justify-content: space-between;
7  position: fixed;
8}
9
10.logo {
11  width: 50px;
12  height: 50px;
13  padding-left: 0;
14}
15
16.logo img {
17  max-width: 100%;
18  margin-left: 0;
19 
20}
21
22nav ul {
23  display: flex;
24  list-style: none;
25 
26}
27
28nav ul li {
29  margin-left: 15px;
30  
31}
32/* ____________________________________ */
33
34
35
36li {
37  font-weight: bold;
38  margin-right: 10px;
39}
40.apple {
41  background-image: url("../airbnb.jpg");
42  background-size: cover;
43  height: 900px;
44  background-repeat: no-repeat;
45  position: relative;
46}
47
48
49
50/* デスクトップ */
51
52@media screen and (min-width:1000px) {
53  .card {
54    float: right;
55    margin: 32px;
56  }
57  
58  .card-title {
59    font-weight: bold;
60    font-size: 40px;
61    margin-bottom: 15px;
62    text-align: left;
63    margin-top: 10px;
64  }
65  
66  .card-text {
67    font-weight: bold;
68    font-size: 16px;
69  
70  }
71  
72  .btn {
73    font-weight: bold; 
74  }
75  
76  .location {
77    border-radius: 4px;
78    padding: 11px;
79    margin-bottom: 8px;
80    width: 360px;
81  }
82  
83  .occupy {
84    border-radius: 4px;
85    padding: 11px 40px 11px 11px;
86  }
87  
88  .guest {
89    border-radius: 4px;
90    padding: 11px 40px 11px 11px;
91  }
92  
93  #btn2 {
94    width: 360px;
95    padding: 10px 22px;
96    margin-top: 1px;
97  }
98    
99  img {
100    width: 380px;
101    height: 380px;
102    margin-bottom: 30px;
103    margin-left: 220px;
104    margin-right: 30px;
105  }
106
107  .s1 {
108    margin-top: 70px;
109    margin-left: 50px;
110  }
111  .s2 {
112    columns: #484848;
113    font-size: 32px;
114  }
115  .s3 {
116    color: #767676;
117    font-size: 16px;
118  }
119  .btn {
120    font-weight: bold; 
121    border: solid black;
122    font-size: 16px;
123  }
124
125  ._ {
126    font-weight: bolder;
127    font-size: 30px;
128    color: #484848;
129    text-align: center;
130    margin-top: 140px;
131  }
132  
133  .step {
134    font-size: 60px;
135    font-weight: bold;
136    text-align: center;
137
138  }
139 
140  
141  .a2 {
142    color: rgb(49, 148, 115);
143    display: block;
144    margin-top: 40px;
145    margin-left: 40px;
146    margin-bottom: 10px;
147    font-size: 20px;
148  }
149
150  ._2 {
151    margin-left: 40px;
152  }
153  .A {
154    width: 2500px;
155    height: 380px;
156    display: flex;
157    margin-top: 170px;
158  }
159  
160
161}
162
163/* デスクトップここまで */
164
165/* モバイル */
166
167@media screen and (max-width: 999px) {
168  .card {
169    display: none;
170  }  
171  .greap {
172    font-size: 50px;
173    font-weight: bold;
174    color: aliceblue;
175    position: absolute;
176    bottom: 0;
177    width: 100%;
178    height: 20%;
179    text-align: center;
180    line-height: 50px;
181    letter-spacing: 2px;
182  }  
183  img {
184    width: 350px;
185    height: 340px;
186    margin-top: 70px;
187    margin-right: 30px;
188    margin-left: 40px;
189    
190  }
191  
192  .s1 {
193    margin-top: 63px;
194    margin-left: 40px;
195  }
196  .s2 {
197    columns: #484848;
198    font-size: 22px;
199  }
200  .s3 {
201    color: #767676;
202    font-size: 16px;
203  }
204  .btn {
205    font-weight: bold; 
206    border: solid black;
207    font-size: 16px;
208  }
209  ._ {
210    font-weight: bolder;
211    font-size: 30px;
212    color: #484848;
213    text-align: center;
214  }
215  
216  .step {
217    font-size: 45px;
218    font-weight: bold;
219    text-align: center;
220  }
221  
222  .a2 {
223    color: rgb(49, 148, 115);
224    display: block;
225    margin-top: 40px;
226    margin-left: 40px;
227    margin-bottom: 10px;
228    font-size: 18px;
229  }
230
231  ._2 {
232    margin-left: 40px;
233
234  }
235  .A {
236    width: 2500px;
237    height: 680px;
238    margin-left: 45px;
239  }
240  
241  
242}
243/* モバイルここまで */
244
245
246
247.all {
248  margin-right: auto;
249  margin-left: auto;
250}
251
252
253
254.h4 {
255  font-weight: bold;
256  margin-bottom: 20px;
257  margin-top: 70px;
258}
259
260.one {
261  margin-top: 30px;
262}
263.two {
264  margin-top: 30px;
265}
266.three {
267  margin-top: 30px;
268}
269
270
271.a {
272  color: rgb(49, 148, 115);
273}
274
275.N1 {
276  background-color: cadetblue;
277  width: 50px;
278  height: 50px;
279  border-radius: 100%;
280  color: aliceblue;
281  font-weight: bold;
282  text-align: center;
283  padding-top: 10px;
284  font-size: 20px;
285  margin-top: 40px;
286  margin-bottom: 20px;
287}
288
289.N2 {
290  background-color: cadetblue;
291  width: 50px;
292  height: 50px;
293  border-radius: 100%;
294  color: aliceblue;
295  font-weight: bold;
296  text-align: center;
297  padding-top: 10px;
298  font-size: 20px;
299  margin-top: 40px;
300  margin-bottom: 20px;
301}
302
303.N3 {
304  background-color: cadetblue;
305  width: 50px;
306  height: 50px;
307  border-radius: 100%;
308  color: aliceblue;
309  font-weight: bold;
310  text-align: center;
311  padding-top: 10px;
312  font-size: 20px;
313  margin-top: 40px;
314  margin-bottom: 20px;
315}
316
317h5 {
318  font-weight: bold;
319  font-size: 16px;
320}
321.ppp p {
322  font-size: 14px;
323}
324
325.set{
326  border: solid rgb(116, 113, 113) 2px;
327  border-radius: 3px;
328  box-shadow:2px 2px 1px ;
329  width: 100%;
330  height: 100px;
331  padding-top: 20px;
332  padding-left: 10px;
333  display: flex;
334  background-image: url("../entrance.jpg");
335  background-position: 0 0 ;
336}
337
338.set img {
339  width: 100px;
340  height: 100px;
341}

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

回答1件

ベストアンサー

画面のスクロールが出来なくなりました。

とりあえず、
overflow: scroll; か overflow: auto; でスクロールできませんか。

これで解決しないなら、現象の再現できる HTMLコードとCSSコードを提示してください。

呈示されたコードを見て

右側に巨大な余白の原因は、

css
1  .A {
2    width: 2500px; /*この巨大な幅が原因*/
3    height: 380px;
4    display: flex;
5    margin-top: 170px;
6  }

これを適切な幅に調整するか、削除するかすれば、余白は消えるでしょう。

最終的にどのようなレイアウトをご希望か不明ですが、とりあえずこの部分は、
一つ前の質問の私の回答のサンプルコードを参考にしてください。

あと、一つの質問が解決する前に、次から次へと質問するのはどうかと思います。
まずは、一つの質問を解決させてから次へ進むようにした方が混乱が少なく、結局早道になると思います。

おそらく、一つ前の質問が解決できていたら、今回の質問は必要なかったはずです。

投稿2020/02/11 10:46

編集2020/02/11 12:38

hatena19

総合スコア33715

kazuki_user

2020/02/11 12:02

返信ありがとうございます。 overflow-flow: hidden; と　「overflow: scroll; や　overflow: auto;」の併記は機能しませんでした。 (スクロールは出来たものの余白は消えませんでした。) 該当箇所がわかりませんでしたので、全体のコード(字数制限の為ある程度カット)を貼らせて頂きました。ご了承ください????

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