html、bootstrap、containerについて

HTMl
1<!DOCTYPE html>
2<html lang=ja dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <!-- fontawesome -->
7    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8<!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10    <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
11    <link rel="stylesheet" type="text/css" href="style.css">
12  </head>
13  <body>
14    <div class="container">
15      <header>
16        <div class="header1">
17          <div class="left">
18            <img src="../trace img/Airbnb/Airbnb-logo.png" alt=""class="inheader1">
19            <a href="index.html">概要</a>
20            <a href="#">準備</a>
21            <a href="">安全</a>
22            <a href="#">マネープラン</a>
23          </div>
24          <div class="right">
25            <p>予想月収</p><p>¥100,891</p>
26            <div class="a">
27              <a href="#" id="start">はじめる</a>
28            </div>
29          </div>
30        </div>
31        <div class="header2">
32          <div class="inheader2">
33            <h1>空き部屋で世界をつなごう</h1>
34            <p>どのくらいの収入が見込めるかチェック</p>
35            <form class="check" action="index.html" method="post">
36              <input type="search" value="東京" placeholder="ロケーション">
37              <br>
38              <select class="selecet" name="select1">
39                <option value="all" selected>まるまる貸切</option>
40                <option value="alone">個室</option>
41                <option value="share">シェアルーム</option>
42              </select>
43              <select class="select" name="select2">
44                <option value="1">ゲスト１人</option>
45                <option value="2">ゲスト２人</option>
46                <option value="3">ゲスト３人</option>
47                <option value="4" selected>ゲスト４人</option>              
48              </select>
49            </form>
50            <p>¥236,567 <span>月あたり</span></p>
51            <div class="a">
52              <a href="#" id="start">はじめる</a>
53            </div>
54          </div>
55          <div class="pattern2">
56            <h1>空き部屋で世界をつなごう</h1>
57          </div>
58        </div>
59      </header>
60      <div class="main">
61        <div class="p">
62          <p>どのくらいの収入が見込めるかチェック</p>
63        </div>
64        <div class="row" id="form">
65          <form class="check" action="index.html" method="post">
66            <input type="search" value="東京" placeholder="ロケーション">
67            <br>
68            <div class="col section2">
69              <select class="selecet" name="select1">
70                <option value="all" selected>まるまる貸切</option>
71                <option value="alone">個室</option>
72                <option value="share">シェアルーム</option>
73              </select>
74            </div>
75            <div class="col section2">
76              <select class="select" name="select2">
77                <option value="1">ゲスト１人</option>
78                <option value="2">ゲスト２人</option>
79                <option value="3">ゲスト３人</option>
80                <option value="4" selected>ゲスト４人</option>
81              </select>
82            </div>
83          </form>
84        </div>
85        <p>¥236,567 <span>月あたり</span></p>
86          <div class="a">
87            <a href="#" id="start">はじめる</a>
88          </div>
89        <div class="row">
90          <div class="col">
91            <h3>なぜAirbnbでホスト？</h3>
92            <p>どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアして、世界中の旅好きな仲間とつながれます。予約可能日から料金、ハウスルーム、ゲストとの交流頻度まで、すべて自分で決めることができます。</p>
93          </div>
94          <div class="col">
95            <h3>困ったときも安心</h3>
96            <p>万一に備えるUS$1,000,000の財産補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます</p>
97          </div>
98        </div>
99        <hr>
100        <h2>3スッテプで簡単ホスティング</h2>
101        <div class="row">
102          <div class="col">
103            <i class="far fa-check-circle"></i>
104            <h3>無料でお部屋を掲載</h3>
105            <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
106          </div>
107          <div class="col">
108            <i class="far fa-check-circle"></i>
109            <h3>ホスティング方法を設定</h3>
110            <p>ご希望のスケジュール、料金、ゲストの要件を選びます。設定の際にはヒントも表示されます。</p>
111          </div>
112          <div class="col">
113            <i class="far fa-check-circle"></i>
114            <h3>はじめてのゲストをもてなそう</h3>
115            <p>リスティングが掲載され次第、条件にかなったゲストから連絡を受けとることができます。ゲストの宿泊前にご質問があればメッセージを送信できます。</p>
116            <a href="">ホスティングの始め方を学ぶ</a>
117          </div>
118        </div>
119        <div class="row">
120          <div class="col">
121            <div class="responsive">
122              <i class="fas fa-quote-left"></i>
123              <p>「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</p>
124            </div>
125            <div class="add">
126              <p>Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>
127            </div>
128            <div class="a_button">
129              <a href="#">ホスト実践例をチェック</a>
130            </div>
131          </div>
132          <div class="col">
133            <img src="trace img/8e6c68cc-e714-4849-bad9-464abf58e84a.jpg" alt="">
134          </div>
135        </div>
136        <hr>
137        <h2>万一のときも安心です</h2>
138        <div class="row">
139          <div class="col section2">
140            <p>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。万一のトラブルのときには、Airbnbが全力でサポートします。建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
141            <div class="other_a">
142              <a href="#">ホストをお守りするしくみを見る</a>
143            </div>
144          </div>
145          <div class="col section2">
146            <ul>
147              <li><i class="fas fa-check"></i>　予約前に政府発行の身分証明書を求める権限</li>
148              <li><i class="fas fa-check"></i>　ハウスルールに同意しないと泊まれない</li>
149              <li><i class="fas fa-check"></i>　過去の宿泊のレビューもばっちり読める</li>
150              <li><i class="fas fa-check"></i>　財物損害は¥100,000,000まで無料で補償</li>
151              <li><i class="fas fa-check"></i>　$1,000,000の賠償責任保険が無料で付帯</li>
152              <li><i class="fas fa-check"></i>　２４時間３６５日対応グローバルカスタマーサポート</li>
153            </ul>
154          </div>
155        </div>
156        <div class="img">
157          <img src="trace img/bb358a46-fa25-4895-b5fd-048a386bdcac.jpg" alt="">
158        </div>
159        <hr>
160        <h2>シンプルな決済</h2>
161        <div class="row">
162          <div class="col section2">
163            <h3>料金設定は完全に自由</h3>
164            <p>料金は常に自由に選択できます。迷ったときには、域内需要に合わせて設定できるツールがあります。</p>
165          </div>
166          <div class="col section2">
167            <h3>手数料が安い</h3>
168            <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一３％をサービス料としていただいております。</p>
169          </div>
170          <div class="col section2">
171            <h3>迅速な支払い</h3>
172            <p>ゲストのチェックイン後に、Paypal、直接振込み、またはその他の利用可能な方法で受取金を送金できます。</p>
173            <div class="other_a">
174              <a href="#">Airbnb収入を得るまでの流れを見る</a>
175            </div>
176          </div>
177        </div>
178        <div class="row flower">
179          <h2>収入を増やした<br>い？</h2>
180          <div class="start2">
181            <a href="#">はじめる</a>
182          </div>
183        </div>
184      </div>
185      <footer class="last">
186        <hr class="last">
187
188        <hr class="last">
189        <div class="row lastfooter">
190          <div class="footerlast1">
191            <img src="../trace img/Airbnb/Airbnb-logo.png" alt="">
192            <p>Airbnb Global Services Limited<br>
193              観光庁長官（01）第s0001号（2018年6月15日-2023年6月14日）
194              ©2019 Airbnb,Inc.All rights reserved.
195            </p>
196          </div>
197          <div class="yen">
198            JPY
199          </div>
200        </div>
201      </footer>
202    </div>
203<!-- jQuery、Popper.js、Bootstrap JS -->
204    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
205    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
206    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
207  </body>
208</html>
209

bodyの中身をcontainerでグルッと囲むと右側に余白ができてしまいます。
container-fluidに変えると消えます。こうするとなぜ消えるのですか？
container-fluidとcontainerの違いは
前者がブラウザの横幅を最大限使って描画されるのに対し、後者は閲覧者の画面サイズに応じて横幅が適宜制限されて描画されることですよね？
つまり連続的かそうでないかの違いであって、なぜそれが余白の有無に関わってしまうのですか？

あと、そもそもcontainerを消し去ってもウィンドウの幅を変えるとそれに対応して表示される幅も変わります。段組もしっかりできています。
containerは本当に必要なのでしょうか？

m.ts10806

2019/05/30 07:11

style.cssや画像、実際の画面キャプチャがないとなんとも言えませんが、きちんと用途があるから用意されているわけで、その用途を突き抜けるような指定をしているのであればまたそれはフレームワークの知るところではないと思いますが。違いであればドキュメントなり実際にbootstrap.cssの中身を見ればどのような指定がされているかわかると思います