###実現したいこと・発生している問題
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