bootstrapを使って画面幅が544px以上768px未満の時に各要素が画面幅いっぱいになるように、各div要素のクラスに"col-sm-12"を指定してるにも関わらず、適用されない。

###実現したいこと・発生している問題
bootstrapを使って画面幅が544px以上768px未満の時に各要素が画面幅いっぱいになるように、各div要素のクラスに"col-sm-12"を指定してるにも関わらず、適用されません。
どこが間違っているのかご指摘よろしくお願いします。

該当のソースコード

html
1<!<!DOCTYPE html>
2<html lang="ja"＞
3<head>
4  <title>現地の人から借りる家、体験＆スポット-Airbnb</title>
5  <meta charset="utf-8">
6  <meta name="description" content="現地の人から借りる家、体験＆スポット-Airbnb">
7  <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">
8  <link rel="stylesheet"  type="text/css" href="css/styles.css">
9  <link rel="icon" href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico">
10  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11</head>
12<body>
13  <header>
14    <img src="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico" class="icon" >
15    <input type="search" name="" value="" class="search">
16    <input type="submit" name="検索" value="検索">
17    <div class="header-bg">
18      <div class="header-title">
19        <h1>旅を贈ろう。</h1>
20        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
21        <a href="#">ギフトカードを登録</a>
22      </div>
23    </div>
24  </header>
25  <section>
26    <div class="section-title">
27      <h1>いつも完璧な贈りもの</h1>
28    </div>
29  <div class="container">
30      <div class="row">
31        <div class="col-sm-12 col-md-4 col-lg-4">
32          <i class="far fa-envelope fa-3x icon-color"></i>
33          <h2>簡単に使える</h2>
34          <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
35        </div>
36        <div class="col-sm-12 col-md-4 col-lg-4">
37          <i class="fas fa-stopwatch fa-3x icon-color"></i>
38          <h2>有効期限なし</h2>
39          <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
40        </div>
41        <div class="col-sm-12 col-md-4 col-lg-4">
42          <i class="fas fa-globe fa-3x icon-color"></i>
43          <h2>忘れられない旅</h2>
44          <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
45        </div>
46      </div>
47    </div>
48　　<!--以下省略-->

css
1body{
2  margin: 0;
3}
4
5/* header */
6
7header .icon{
8  margin: 25px;
9  display: inline;
10}
11
12.header-bg{
13  background-image: url(../img/BackgroundHomeSummer.jpg);
14  background-size: cover;
15
16}
17
18.header-title{
19  width: 1032px;
20  margin: auto;
21  padding: 200px 0 215px;
22}
23
24.header-title h1, .header-title p{
25  color: white;
26}
27
28.header-title h1{
29  margin-bottom: 25px;
30  font-weight: bold;
31}
32
33.header-title p{
34  margin-bottom: 40px;
35}
36
37.header-title a{
38  background-color: white;
39  color: #000;
40  padding: 15px 25px;
41  border-radius: 5px;
42  font-weight: 500;
43}
44
45.header-title a:hover{
46  text-decoration: none;
47}
48
49/* section */
50.section-title h1{
51  font-size: 30px;
52  width: 350px;
53  margin: 60px auto;
54  font-weight: bold;
55}
56
57.row h2{
58  font-size: 16px;
59  font-weight: bold;
60  margin: 30px auto;
61}
62
63.row p{
64  color: gray;
65}
66
67.section-title{
68  margin-top: 45px;
69}
70section i{
71  display: block;
72}
73
74section .icon-color{
75  color: #007a87;
76}
77
78section .row{
79  text-align: center;
80}
81
82

s8_chu

2019/06/20 04:55

質問者さんが記述した CSS を質問文に追記していただけませんか？

to-to-

2019/06/20 05:07

css追加致しました。

s8_chu

2019/06/20 05:12

こちらで質問者さんのコードの動作を確かめてみましたが、質問文にあるような問題が発生していないように見えます。こちら( https://codepen.io/anon/pen/JQbzGj ) を確認したとき、質問文の問題は発生していますか？

to-to-

2019/06/20 05:45

確かにこの場合は問題なさそうです。ブラウザで普通に閲覧するときには"col-sm-12"が確かに適用されているのですが、質問に添付された写真にあるように、デベロッパーツール上だと適用されてないです。また、先ほど、試しにそれぞれのクラスから"col-sm-12"を消してページを更新したところ、なぜか消したにもかかわらず"col-sm-12"が適用されていました。