レスポンシブ化したときの横スクロールをなくしたい

画面縮小するとページのしたに横スクロールがでてしまいます。何が原因なのかわからず困ってます。回答よろしくお願いします。

HTML
1コード<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta id="view" name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <link rel="stylesheet" href="style2.css">
9  <link rel="stylesheet"  media="only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css" />
10  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12  <style>
13    .container {
14      width: 100%;
15      max-width: 1032px;
16      /* margin-left: auto;
17      margin-right: auto; */
18      padding: 0;
19      
20    }
21  .intro-btn {
22    background-color: #d35105e8;
23    
24  }
25  
26  
27  .right-btn {
28    padding: 7px 0; 
29  }
30  
31  .example {
32    padding: 10px 25px;
33    border: 2px solid #426568;
34    font-weight: bold;
35    color: #426568;
36    
37  }
38
39  .example:hover {
40    color: #426568;
41  }
42  
43  .btn-light {
44    background-color: white;
45    border: solid white;
46
47  }
48
49  .btn-light:hover {
50  background-color: white;
51  border: solid white;
52}
53
54  .main-7 {
55    margin-left: 0;
56    margin-right: 0;
57  }
58
59  .air {
60    padding: 0 0;
61  }
62
63  .main-4 {
64	/* width: 100%;
65	max-width: 430px; */
66padding-left: 0;	
67}
68
69  </style>
70</head>
71<body>
72  <div class="main-wrapper">
73    <div class="container">
74     <div class="row">
75       <div class="main-1 col-lg-5 mt-5 mb-5">
76         <h4 class="font-weight-bold">Airbnbでホストするこれだけの理由</h4>
77         <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
78       </div>
79         <div class="col-lg-5 mt-5 offset-lg-2">
80           <h4 class="font-weight-bold">困ったときも安心</h4>
81           <p>万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
82          </div>
83        </div>
84            <div class="main-2 mt-5">
85              <h3>_____</h3>
86              <h1 class="pb-2">3ステップでホスティング</h1>
87            </div>
88            <div class="row mt-5">
89              <div class="col-lg-4">
90                <img src="img/sozai3.jpg" alt="">
91                <h4 class="font-weight-bold mt-2">無料でお部屋を掲載</h4>
92                <p class="pr-4 mt-3">共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
93              </div>
94              <div class="col-lg-4">
95                <img src="img/sozai2.jpg" alt="">
96                <h4 class="font-weight-bold mt-2">ホスティング方法を設定</h4>
97                <p class="pr-4 mt-3">スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。</p>
98              </div>
99              <div class="col-lg-4 mb-5">
100                <img src="img/sozai1.jpg" alt="">
101                <h4 class="font-weight-bold pr-3 mt-2">はじめてのゲストが来ます！</h4>
102                <p class="pr-4 mt-3">リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
103                <a href="#" >ホストをはじめる方法をチェック</a>
104              </div>
105            </div>
106            <div class="mt-5 pt-5 main-3 d-fle">
107              <div class="row">
108                <div class="col-lg-6">
109                  <img src="https://kinniku-mukimukiman.up.seesaa.net/image/E9BB92E4BABA_E7AD8BE88289E383A0E382ADE383A0E382ADE794B7.jpg" height="517" width="561" class="mb-5">
110                </div>
111                <div class="col-lg-5 offset-lg-1 main-4">
112                  <h1 class="mt-5">“</h1>
113                  <h2>ホスティングの収入で、キッチンを新調したり、他の改装費用の一部を賄うことができました」</h2>
114                  <p>Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p>
115                  <button type="button" class="btn btn-outline example">ホスト実践例をチェック</button>
116                </div>
117              </div>       
118            </div>       
119            <div class="main-2 mt-5">
120              <h3>_____</h3>
121              <h1 class="mb-5">よくある質問の答え</h1>
122            </div>
123            
124            <div class="row">
125              <div class="col-lg-6 mt-3 question pr-2">
126                <ul>
127                  <li><a href="#">Airbnbホストになれるのはどんな人？</a></li>
128                  <li><a href="#">予約前にゲストに求められる要件は？</a></li>
129                  <li><a href="#">お部屋の掲載料はいくら？</a></li>
130                </ul>
131              </div>
132              <div class="col-lg-6 mt-3 mb-5 question">
133                <ul>
134                  <li><a href="#">家財破損があった場合、どのような補償がありますか？
135  
136                  </a></li>
137                  <li><a href="#">リスティングの料金を選ぶには？</a></li>
138                  <li><a href="#">料金設定の支援ツールはありますか？</a></li>
139                </ul>
140              </div>
141            </div>
142            <div class="main-5 mt-5 pt-4">
143              <h4 class="font-weight-bold mb-3">ホスティングの詳細はこちら</h4>
144            </div>
145            <div class="row main-6">
146              <div class="col-lg-4 mb-3">
147                <img src="https://cdn.pixabay.com/photo/2017/08/03/20/50/romantic-2578312_960_720.jpg"  alt="">
148                <p class="font-weight-bold">初期設定</p>
149                <h6>ホスティング入門ガイド</h6>
150                <a href="#" class="stretched-link">もっと詳しく</a>
151              </div>
152              <div class="col-lg-4">
153                <img src="https://cdn.pixabay.com/photo/2017/04/01/16/42/young-woman-2194038_960_720.jpg"  alt="">
154                <p class="font-weight-bold">安全</p>
155                <h6>ホストを守るAirbnbのしくみ</h6>
156                <a href="#" class="stretched-link">もっと詳しく</a>
157              </div>
158              <div class="col-lg-4">
159                <img src="https://cdn.pixabay.com/photo/2017/08/03/20/50/romantic-2578312_960_720.jpg" alt="" >
160                <p class="font-weight-bold">マネープラン</p>
161                <h6>Airbnbで収益を得るには</h6>
162                <a href="#" class="stretched-link">もっと詳しく</a>
163              </div>
164            </div>
165          </div>
166        </div>   
167</body>
168</html>
169
170```css
171コード
172```* {
173  list-style: none;
174}
175
176* {
177	box-sizing: border-box;
178}
179
180body {
181  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
182}
183
184p,h4 {
185	color: #48504e;
186}
187
188img {
189	max-width: 100%;
190	height: auto;
191
192
193}
194
195
196
197.main-2 {
198	text-align: center;
199	
200}
201
202.main-2 h3 {
203	color: #4f6d66;
204}
205
206.main-2 h1{
207	font-weight: bolder;
208	font-size: 60px;
209
210}
211
212.main-wrapper p {
213	line-height: 1.8em;
214}
215
216.main-3 h1 {
217	font-size: 100px;
218	height: 60px;
219	color: #f09246fa;
220	
221}
222
223.main-4 {
224
225padding-left: 0;	
226}
227
228.question li {
229	border-bottom:1px solid rgb(228, 233, 233);
230	padding: 24px 0;
231}
232
233.question ul {
234	padding-left: 0;
235	
236}
237
238.question a {
239	color: #308888;
240	font-size: 1.15em;
241	font-weight: normal;
242  
243}
244
245.question a:hover {
246	color: #308888;
247}
248
249.main-6 h6 {
250	font-size: 14.2px;
251	font-weight: lighter;
252}
253
254.main-6 a:hover {
255	color: #429c9c;
256	text-decoration: none;
257}
258
259.main-6 a {
260	color: #429c9c;
261	font-size: 14.2px;
262}
263
264.stretched-link::after {
265	top: 0;
266	left: 0;
267	bottom: 0;
268	right: 0;
269	width: 326.66px;
270	margin: auto;
271}
272
273.main-6 img {
274	width: 100%;
275	border-radius: 5px;
276	
277	}
278
279```ここに言語を入力
280コード

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

回答1件

ベストアンサー

.containerに指定したwidth: 100%と、
.rowに指定されているmargin-left: -15px;とmargin-right: -15px;の組み合わせにより生じている問題です。

すぐ解決するなら、以下のようにすればOKです。
calc(100% - 14px - 14px)というように、15pxより小さい数字を指定すると再び横スクロールが出ます。

.container {
  width: calc(100% - 30px - 30px); /* 左右に余白が30pxずつあるイメージ。 */
  max-width: 1032px;
  margin-left: auto; /* コメントアウトを解除 */
  margin-right: auto; /* コメントアウトを解除 */
  padding: 0;
}

が、メディアクエリを用いて記述したほうがいいような気もします。

投稿2020/03/22 10:01

編集2020/03/22 10:06