背景画像を画面幅いっぱいにできず、左右に空白ができてしまう件

サイト模写をやっていて、調べてもわからず困ってしまったので質問します。

以下のAirbnbのサイトを模写してました。
Airbnb

本来であればアイキャッチ画像が画面サイズに合わせていっぱいに広がっているんですが、模写してたらスクショのように左右に空白ができてしまいました・・・。

今は一応、コンテナの中に全部要素が入ってるんですが、それだと上手くいかないと思い、一個階層が上のone-wrapperに直接CSSを効かせようととしても、なぜだかうまく効きません。

解決策がわかる方、教えていただけないでしょうか。よろしくお願いします。

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
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    <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
11    <link href="./css/style.css" rel="stylesheet">
12    <script src="https://kit.fontawesome.com/284c073c58.js" crossorigin="anonymous"></script>
13
14
15    <title>現地の人から借りる家、体験＆スポット</title>
16  </head>
17
18  <body>
19
20    <header>
21      <div class="container">
22
23        <div class="header-left">
24          <a href="#"><i class="fab fa-airbnb"></i></a>
25          <input type="text" name="search" class="use_icon" placeholder="&#xf002; 探す">
26        </div>
27
28        <div class="header-right">
29            <ul class="menu">
30              <li><a href="#">ホストをはじめる</a></li>
31              <li><a href="#">ヘルプ</a></li>
32              <li><a href="#">登録する</a></li>
33              <li><a href="#">ログイン</a></li>
34            </ul>
35        </div>
36
37      </div>
38    </header>
39
40    <one-wrapper>
41      <div class="container">
42
43        <div class="top-massage">
44          <h1>旅を贈ろう。</h1>
45          <p>Airbnbギフトカードで世界をぐんと身近に</p>
46          <button type="button" class="btn btn-light text-dark">ギフトカードを登録</button>
47        </div>
48
49      </div>
50    </one-wrapper>
51
52    <two-wrapper>
53      <div class="container">
54        <h2>いつも完璧な贈りもの</h2>
55
56        <div class="information">
57
58          <div class="gift mail">
59            <i class="far fa-envelope"></i>
60            <h5>簡単に使える</h5>
61            <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
62          </div>
63
64          <div class="gift limit">
65            <i class="fas fa-stopwatch"></i>
66            <h5>有効期限なし</h5>
67            <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
68          </div>
69
70          <div class="gift trip">
71            <i class="fas fa-globe-americas"></i>
72            <h5>忘れられない旅</h5>
73            <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
74          </div>
75
76        </div>
77
78      </div>
79    </two-wrapper>
80
81    <three-wrapper>
82      <div class="container">
83        <img src="./images/appsitter-mac.png" alt="present">
84        <h2>ギフトカードをもらったら…</h2>
85        <h5>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</h5>
86        <button type="button" class="btn btn-danger">ギフトカードを登録する</button>
87        <p>Airbnbギフトカードの仕組みは？</p>
88      </div>
89    </three-wrapper>
90
91    <four-wrapper>
92      <div class="container">
93        <div class="footer-info">
94
95          <div class="airbnb">
96            <h6 class="footer-info-title">Airbnb</h6>
97            <p>採用情報</p>
98            <p>ニュース</p>
99            <p>ポリシー</p>
100            <p>ヘルプ</p>
101            <p>ダイバーシティ&amp;ビロンギング</p>
102            <p>アクセシビリティ対応<span class="badge badge-success">新着</span></p>
103          </div>
104
105          <div class="staff">
106            <h6 class="footer-info-title">スタッフのおすすめ</h6>
107            <p>信頼&amp;安全</p>
108            <p>お友達紹介クーポン</p>
109            <p>ギフトカード</p>
110            <p>Airbnb Citizen</p>
111            <p>出張</p>
112            <p>アクティビティ<span class="badge badge-success">新着</span></p>
113            <p>Airbnbmag</p>
114          </div>
115
116          <div class="hosting">
117            <h6 class="footer-info-title">ホスティング</h6>
118            <p>ホストになる理由</p>
119            <p>おもてなしの心</p>
120            <p>ホストの責任</p>
121            <p>コミュニティセンター</p>
122            <p>体験を掲載<span class="badge badge-success">新着</span></p>
123            <p>オープンホーム</p>
124          </div>
125
126          <div class="poricy">
127            <div class="sns">
128              <i class="fab fa-facebook-f"></i>
129              <i class="fab fa-twitter"></i>
130              <i class="fab fa-instagram"></i>
131            </div>
132            <p>利用規約</p>
133            <p>プライバシー</p>
134            <p>サイトマップ</p>
135          </div>
136
137        </div>
138      </div>
139    </four-wrapper>
140
141    <footer>
142      <div class="container">
143
144        <div class="footer-left">
145          <i class="fab fa-airbnb"></i>
146          <p>&copy;2019 Airbnb, Inc. All rights reserved.</p>
147        </div>
148
149        <div class="footer-right">
150          <button type="button" class="btn btn-default btn-sm">日本語</button>
151          <button type="button" class="btn btn-default btn-sm">PHP-₱</button>
152        </div>
153
154      </div>
155
156    </footer>
157
158
159    <!-- Optional JavaScript -->
160    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
161    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
162    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
163    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
164  </body>
165</html>

CSS
1@charset "UTF-8";
2
3/*全体*/
4
5* {
6  font-style: "Circular", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
7  "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic",
8  "ＭＳ ゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
9}
10
11/*ヘッダー*/
12
13header .container {
14  display: flex;
15  height: 80px;
16  justify-content: space-between;
17  align-items: center;
18}
19
20.header-left {
21  display: flex;
22  align-items: center;
23}
24
25header i {
26  font-size: 34px;
27  color: tomato;
28  margin-left:10px;
29  margin-right: 25px;
30}
31
32header input {
33  height: 50px;
34  width: 460px;
35}
36
37header input::placeholder {
38  font-size: 1rem;
39  font-weight: bold;
40}
41
42header ul {
43  list-style: none;
44  display: flex;
45  color: #484848;
46}
47
48header li {
49  font-size: 14px;
50  font-weight: 600;
51  padding: 0px 15px;
52}
53
54header li a {
55  color: inherit;
56  text-decoration: none;
57}
58
59 header li a:hover {
60  color: inherit;
61  border-bottom: 2px solid inherit;
62  padding-bottom: 10px;
63}
64
65.use_icon {
66  display: inline-block;
67  font-family: Fontawesome;
68  font-style: normal;
69  font-weight: normal;
70  line-height: 1rem;
71  -webkit-font-smoothing: antialiased;
72  -moz-osx-font-smoothing: grayscale;
73}
74
75/*one-wrapper*/
76
77one-wrapper .container {
78  height: 600px;
79  background-image: url(../images/BackgroundHomeSummer.jpg);
80  background-size: cover;
81  display: flex;
82  align-items: center;
83}
84
85.top-massage {
86  margin-left: 30px;
87}
88
89.top-massage h1 {
90  font-size: 46px;
91  font-weight: bold;
92  color: #fff;
93  line-height: 52px;
94  margin-bottom: 30px;
95}
96
97.top-massage p {
98  font-size: 18px;
99  color: #fff;
100  line-height: 26px;
101  margin-bottom: 30px;
102}
103
104.top-masasge .btn{
105  font-size: 16px;
106  color: #484848;
107}
108
109/*two-wrapper*/
110
111two-wrapper .container {
112  color: #484848;
113  text-align: center;
114  height: 320px;
115}
116
117.information {
118  display: flex;
119  justify-content: center;
120}
121
122two-wrapper .container h2 {
123  font-size: 32px;
124  font-weight: bold;
125  color:inherit;
126  margin:50px 0px;
127}
128
129two-wrapper .container h5 {
130  font-size: 18px;
131  font-weight: bold;
132  color: inherit;
133  margin-bottom: 25px;
134}
135
136two-wrapper .container p {
137  font-size: 16px;
138  font-weight: 400;
139  color: inherit;
140}
141
142two-wrapper .container i {
143  font-size: 50px;
144  color: #007A87;
145  margin-bottom: 30px;
146
147}
148
149.gift {
150  text-align: center;
151  width: 320px;
152  margin: 0px 15px;
153}
154
155/* three-wrapper*/
156
157three-wrapper .container {
158  height: 420px;
159  color: #fff;
160  text-align: center;
161  background-color: #007A87;
162}
163
164three-wrapper .container img {
165  margin-top: 45px;
166  margin-bottom: 25px;
167}
168
169three-wrapper .container h2 {
170  font-size: 32px;
171  font-weight: bold;
172  color: inherit;
173  margin-bottom: 20px;
174}
175
176three-wrapper .container h5 {
177  font-size: 20px;
178  font-weight: normal;
179  color: inherit;
180  margin-bottom: 50px;
181}
182
183three-wrapper .container button {
184  margin-bottom: 20px;
185}
186
187three-wrapper .container p {
188  font-size: 14px;
189  font-weight: normal;
190  color: inherit;
191  opacity: 0.7;
192}
193
194three-wrapper .container p:hover {
195  opacity: 1;
196}
197
198/*four-wrapper*/
199
200four-wrapper .container {
201  height: 255px;
202  color: #484848;
203  border-bottom: 1px solid #999999;
204}
205
206.footer-info {
207  display: flex;
208  margin-top: 50px;
209
210}
211
212.airbnb, .staff, .hosting, .poricy {
213  width: 25%;
214}
215
216four-wrapper .container h6 {
217  display: inline-block;
218
219  font-size: 14px;
220  color: inherit;
221  font-weight: bold;
222  padding-bottom: 1.5em;
223}
224
225four-wrapper .container p {
226  font-size: 14px;
227  color: #767676;
228  line-height: 0.5em;
229}
230
231four-wrapper .container i {
232  font-size: 18px;
233  color: inherit;
234  padding-right: 15px;
235  margin-top: 2em;
236  margin-bottom: 1.5em;
237}
238
239/* footer */
240
241footer .container {
242  display: flex;
243  justify-content: space-between;
244  height: 70px;
245  color: #484848;
246  align-items: center;
247}
248
249footer .footer-left {
250  display: flex;
251  align-items: center;
252}
253
254footer i {
255  font-size: 20px;
256  color: inherit;
257  padding-right: 10px;
258  padding-bottom: 15px;
259}
260
261footer p {
262  font-size: 14px;
263  color: #767676;
264}
265

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

回答1件

ベストアンサー

containerクラスに bootstrap のCSSが適用されているのが原因です。

独自のスタイルを設定するときは、bootstrap のクラス名と被るクラス名は避けましょう。

html
1    <one-wrapper>
2      <div class="container1">
3
4/* 中略 */
5
6      </div>
7    </one-wrapper>

css
1/*one-wrapper*/
2
3one-wrapper .container1 {
4  height: 600px;
5  background-image: url(../images/BackgroundHomeSummer.jpg);
6  background-size: cover;
7  display: flex;
8  align-items: center;
9}

他の部分のcontainerも修正してください。

投稿2019/10/22 03:20

hatena19

総合スコア34073

shinjia305

2019/10/22 05:41

むむむ、ということはcontenairクラスが予約語？指示語？みたいな形でBootstrapにあって、それと競合しているということでしょうか？だからCSSが効かないという認識であってますかね？とりあえず、container1とか2とか変えてみて今やってみたんですが、直せました！ありがとうございます！