offsetが適用されない

###実現したいこと
下記サイトの模写コーディングをしています。
Airbnb
このサイトは全体的に（一部適用外もありますが、）、両サイドに余白が空いているので、bootstrapの入れ子の状態を使って
全体的に両サイドに余白を空けたいです。

問題点、エラーコード

書いたコードをPCで表示してみると、普通に余白が空いてくれるのですが、ディベロッパーツールでiPhoneXのサイズで表示させると、余白が空いてくれません。
paddingもいらないかなと思い、paddingを消してみると、colのoffsetがきちんと適用されていないせいか、変な感じに拡大してしまいました。
お時間ある方、どうしてiphoneバージョンで余白がなくなってしまうのか教えていただきたいです。

html
1<!DOCTYPE html>
2<html lang="en">
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    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9   
10
11    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
12    <link rel="stylesheet" href="style.css">
13      <!-- Bootstrap CSS -->
14      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
15
16    <title>airbnb</title>
17  </head>
18    <body class="container-fluid">
19      
20        <div class="body-row row">
21          <div class="body-col offset-sm-1 col-sm-10 offset-lg-1 col-lg-10">
22
23
24                <header class="row">    
25                  <ul>
26                    <li class="col-sm-1 col-lg-3 fab fa-airbnb h-100 bg-warning"><a href="#"></a></li>
27                    <li class="col-sm-1 col-lg-3"><a href="#">概要</a></li>
28                    <li class="col-sm-1 col-lg-3"><a href="#">準備</a></li>
29                    <li class="col-sm-1 col-lg-3"><a href="#">安全</a></li>
30                    <li class="col-sm-1 col-lg-3"><a href="#">マネープラン</a></li>
31                  </ul>
32              </header>
33
34              <top class="row">
35                <div class="top-img col-sm-12 col-lg-12">
36                </div>
37
38                </div>
39  
40              </div>
41            </div>
42</body>
43</html>

css
1*{
2  box-sizing: border-box;
3}
4.body-col{
5  padding: 0px;
6}
7header ul{
8  margin: 0%;
9  padding: 0%;
10  display: flex;
11  justify-content: start;
12  list-style: none;
13  align-items: center;
14  text-align: center;
15}
16.fa-airbnb{
17  font-size: 14px;
18  line-height: 70px;
19}
20.top-img{
21  width: 100%;
22  padding-top: 50%;
23  background-image: url(image/istockphoto-1207862114-170667a.jpg);
24  object-fit: fill;
25  background-size: cover;
26
27}
28

m.ts10806

2020/10/19 04:32

実機確認はしてみましたか？

Sakupi

2020/10/19 05:10

いいえ、iphoneXそのものでは見ていません。。

Sakupi

2020/10/19 05:26

実機確認（iphone８ですが、、、）してみたところ,デザインが全くもって崩れていたので、新たに画像を添付させていただきます。

m.ts10806

2020/10/19 07:24

ひとまず、CSSは基本は後勝ちなので、BootstrapなどCSSフレームワークを採用される場合は、独自に組むCSSは後から読み込ませないとBootstrapに上書きされて想定のレイアウトにならないことがあります。それだけで改善されるかどうかは分からないですが、前提からレイアウトできるようになっていないので、そこから調整してみてください。あとやはり昨今はモバイルファーストでＷｅｂサイトを作ることが推奨されているので、ＰＣサイト調整は後からしたほうが良いでしょうね。

Sakupi

2020/10/19 15:08

返信、回答ありがとうございます！わかりました！独自cssの方を後から読みこませるとそれが勝ってしまってbootstrapが有効になっていない箇所があるかもしれないということなんですね。修正してみます！

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

回答1件

ベストアンサー

こんにちは。

どうしてiphoneバージョンで余白がなくなってしまうのか

ご提示のスクリーンショットが正しいのであれば、iPhoneX のスクリーン幅は375pxです。
ところで、Bootstrap のブレークポイントは以下の通りです。

Extra small

<576px
概要(Overview) - Bootstrap 4.5 - 日本語リファレンス

この場合は、一番小さい Extra small のケースに当たるということです。
ご存知の通り、Bootstrapのブレークポイントはモバイルファースト、つまり「このスクリーン幅より大きい場合」を設定していくものですから、Extra small の時のオフセットを記述する場合は、ブレークポイントを書かないのが正しいです。

蛇足ですが、そのようなアドホックな対応をするよりも、私見ですが container に max-width を当てた方がいいんじゃないかな、とは思います。

投稿2020/10/19 08:13

編集2020/10/19 08:15