画面幅を横幅いっぱいにしたい。

前提・実現したいこと

画面幅いっぱいに広がって欲しいのでbodyに対して　box-sizing: border-box; width: 100% を指定したのですが広がってくれません。どうしたら良いでしょうか？
どこが問題なのかわからないので、とりあえずすべてのhtmlとcssのコードを載せときます。

該当のソースコード

html
1<body>
2  <header>
3    <img src="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico" class="icon">
4    <input type="search" name="" value="" class="search">
5    <input type="submit" name="検索" value="検索">
6    <div class="header-bg">
7      <div class="header-title">
8        <h1>旅を贈ろう。</h1>
9        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
10        <a href="#">ギフトカードを登録</a>
11      </div>
12    </div>
13  </header>
14  <section>
15    <div class="section-title">
16      <h1>いつも完璧な贈りもの</h1>
17    </div>
18    <div class="container">
19      <div class="row row1">
20        <div class="col-12  col-md-4">
21          <i class="far fa-envelope fa-3x icon-color"></i>
22          <h2>簡単に使える</h2>
23          <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
24        </div>
25        <div class="col-12 col-md-4">
26          <i class="fas fa-stopwatch fa-3x icon-color"></i>
27          <h2>有効期限なし</h2>
28          <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
29        </div>
30        <div class="col-12 col-md-4">
31          <i class="fas fa-globe fa-3x icon-color"></i>
32          <h2>忘れられない旅</h2>
33          <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
34        </div>
35      </div>
36    </div>
37  </section>
38  <section class="call-to-action">
39    <img src="img/Present Icon.png " alt="プレゼントアイコン">
40    <h1 class="width1032">ギフトカードをもらったら...</h1>
41    <p class="width1032">ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
42    <a href="#" class="btn1">ギフトカードを登録する</a>
43    <a href="#" class="btn2">Airbnbギフトカードの仕組みは？</a>
44  </section>
45  <footer>
46    <div class="container container2">
47      <div class="row row2">
48        <div class="col-sm-3">
49          <p>Airbnb</p>
50          <ul>
51            <li><a href="#">採用情報</a></li>
52            <li><a href="#">プレス</a></li>
53            <li><a href="#">ポリシー</a></li>
54            <li><a href="#">ヘルプ</a></li>
55            <li><a href="#">ダイバーシティ&ビロンギング</a></li>
56            <li><a href="#">アクセシビリティ対応</a> <span>新着</span></li>
57            <li><a href="#">企業情報</a></li>
58          </ul>
59        </div>
60        <div class="col-sm-3">
61          <p>スタッフのおすすめ</p>
62          <ul>
63            <li><a href="#">信頼&安全</a></li>
64            <li><a href="#">お友達紹介クーポン</a></li>
65            <li><a href="#">Airbnb Citizen</a></li>
66            <li><a href="#">出張</a></li>
67            <li><a href="#">ガイドブック</a></li>
68            <li><a href="#">Airbnbmag</a></li>
69          </ul>
70        </div>
71        <div class="col-sm-3">
72          <p>ホスティング</p>
73          <ul>
74            <li><a href="#">ホストになる理由</a></li>
75            <li><a href="#">おもてなしの心</a></li>
76            <li><a href="#">ホストの責任</a></li>
77            <li><a href="#">コミュニティセンター</a></li>
78            <li><a href="#">体験を掲載</a> <span>新着</span></li>
79            <li><a href="#">オープンホーム</a></li>
80          </ul>
81        </div>
82        <div class="col-sm-3">
83          <a href="#" class="sns"><i class="fab fa-facebook-f icon-size color-gray"></i></a>
84          <a href="#" class="sns"><i class="fab fa-twitter icon-size color-gray"></i></a>
85          <a href="#" class="sns"><i class="fab fa-instagram icon-size color-gray"></i></a>
86          <ul>
87            <li><a href="#">利用規約</a></li>
88            <li><a href="#">プライバシー</a></li>
89            <li><a href="#">サイトマップ</a></li>
90          </ul>
91        </div>
92      </div>
93      <hr>
94      <div class="row row3">
95        <div class="col-9 footer-message">
96          <div class="footer-leftside">
97            <div class="img">
98              <img src="img/footer-icon.png" width="21px" height="25px">
99            </div>
100            <div class="footer-info">
101              <a href="#"><div>Airbnb Global Services Limited</div>
102              <div>観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</div></a>
103            </div>
104          </div>
105          <div class="copy-right">
106            <p>&copy; 2019 Airbnb, Inc. All rights reserved.</p>
107          </div>
108        </div>
109        <div class="col-3 option">
110          <a href="#">日本語</a>
111          <a href="#">JPY-¥</a>
112        </div>
113      </div>
114    </div>
115  </footer>
116 </body>
117

css
1body{
2  margin: 0;
3  box-sizing: border-box;
4  width: 100%;
5}
6
7/* header */
8
9header .icon{
10  margin: 25px;
11  display: inline;
12}
13
14.header-bg{
15  background-image: url(../img/BackgroundHomeSummer.jpg);
16  background-size: cover;
17  width: 100%
18}
19
20.header-title{
21  width: 1032px;
22  margin: auto;
23  padding: 200px 0 215px;
24}
25
26.header-title h1, .header-title p{
27  color: white;
28}
29
30.header-title h1{
31  margin-bottom: 25px;
32  font-weight: bold;
33}
34
35.header-title p{
36  margin-bottom: 40px;
37}
38
39.header-title a{
40  background-color: white;
41  color: #000;
42  padding: 15px 25px;
43  border-radius: 5px;
44  font-weight: 500;
45}
46
47.header-title a:hover{
48  text-decoration: none;
49}
50
51/* section */
52.section-title h1{
53  font-size: 30px;
54  width: 350px;
55  margin: 60px auto;
56  font-weight: bold;
57}
58
59.row h2{
60  font-size: 16px;
61  font-weight: bold;
62  margin: 30px auto;
63}
64
65.row1 p{
66  color: gray;
67}
68
69.section-title{
70  margin-top: 45px;
71}
72section i{
73  display: block;
74}
75
76section .icon-color{
77  color: #007a87;
78}
79
80section .row{
81  text-align: center;
82}
83
84.container {
85  margin-bottom: 30px
86}
87
88/* section(call-to-action) */
89
90section.call-to-action{
91  background-color: #007a87;
92  text-align: center;
93  color: white;
94  padding: 40px 0;
95}
96
97.call-to-action h1{
98  font-size: 32px;
99  margin: 20px auto;
100  font-weight: bold;
101}
102
103.call-to-action{
104  font-size: 20px;
105}
106
107.width1032{
108
109  margin: 0 auto;
110}
111
112.call-to-action .btn1{
113  background-color: #ff5a5f;
114  border-radius: 5px;
115  padding: 10px 30px;
116  margin: 45px auto 20px;
117  color: white;
118  font-size: 16px;
119  display: block;
120  width: 250px;
121}
122
123.call-to-action .btn1:hover{
124  text-decoration: none;
125  background-color: #fa8072
126}
127
128.call-to-action .btn2{
129  color: white;
130  font-size: 14px;
131  opacity: 0.5;
132}
133
134.call-to-action .btn2:hover{
135  text-decoration: none;
136  opacity: 1;
137}
138
139/* footer */
140
141.row2{
142  font-weight: 800;
143}
144
145footer p{
146  padding-left: 40px;
147}
148footer ul{
149  list-style-type: none;
150}
151
152footer li{
153  line-height: 22px;
154}
155footer a{
156  font-size: 14px;
157  vertical-align: bottom;
158  color: #767676;
159}
160
161footer a:hover{
162  color: #767676;
163  text-decoration: underline;
164}
165
166footer .container2{
167  padding-top: 40px
168}
169
170.row2 li span{
171  background-color: #007a87;
172  color: #fff;
173  font-size: 12px;
174  border-radius: 5px;
175  padding: 2px;
176  font-weight: lighter;
177}
178
179.row2 .sns{
180  display: inline-block;
181  margin-bottom: 16px;
182}
183
184.row2 .sns:not(:first-child){
185  padding: 7px 7px 0
186}
187
188.row2 .sns:first-child{
189  padding: 7px 7px 0 40px;
190}
191
192.color-gray{
193  color: gray;
194}
195
196.icon-size{
197  font-size: 1.4em;
198}
199
200/* row3 */
201
202.row3 .img{
203  display: inline-block;
204  margin-top: 10px;
205  float: left;
206}
207
208.row3 .footer-leftside{
209  display: inline;
210  float: left;
211}
212
213.row3 .footer-leftside .footer-info{
214  margin-left: 35px
215}
216
217.copy-right{
218  display: inline-block;
219  font-size: 14px;
220
221}
222/* .row3 .copy-right{
223  float: right;
224} */
225.row3 p{
226  color: gray;
227  padding: 0;
228}
229
230.row3 .option{
231  text-align: right;
232}
233
234.row3 .option a{
235  border: solid 0.1px;
236  border-color: rgb(242, 242, 242);
237  padding: 5px 10px;
238  margin: 5px;
239  /* border-radius: 5px; */
240}
241
242.row3 .option a:hover{
243  text-decoration: none;
244  background-color: rgb(242, 242, 242);
245}
246
247.footer-message {
248   display: inline-block;
249 }
250
251/* mediaquary */
252
253@media screen and (max-width: 767px) {
254  .row2{
255    display: none;
256  }
257  .container2 hr{
258    display: none;
259  }
260}
261

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

初心者、独学なので汚いコードだと思われますが、よろしくお願いします。

m.ts10806

2019/06/24 04:56

んー再現しないですね。画像×状態で提示コードそのままだと「ギフトカードをもらったら...」がある緑の帯部分はちゃんと100%に広がっています。 ※細かい指摘なのでこちらに書きますが&のようなHTML特殊文字は&のように（文字実体参照）したほうが良いです。

yoshinavi

2019/06/24 07:40

Chromeのデベロッパーツール等で、モバイル画面時に、横いっぱいに広がっている「要素」を探してみると良いかと思います。

to-to-

2019/06/26 04:55

返信遅くなってすみません。いただいたアドバイスを参考にさせていただきました。

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

回答1件

ベストアンサー

CSS
1.header-title{
2  /*width: 1032px; *//* これがあるからその幅分押し広がっているのでは？ */
3  max-width: 1032px; /* これとかどうなりますか？ */
4  margin: auto;
5  padding: 200px 0 215px;
6}