bootstrapのmarginが上手くいかない

模写コーディングの際に、bootstrapを初めて使いました。
htmlの77行目です。
my-5を指定して、
開発者ツールでmargin: 0 3em;となっているが、
見た目が変わりません。どうしてですか？

html
1<!doctype html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width,initial-scale=1">
5<link rel="stylesheet" href="css/styles.css" type="text/css">
6<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">
7<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
8<meta charset="utf-8">
9<title>copy-Airbnb</title>
10</head>
11<body>
12  <header>
13    <nav class="navbar navbar-expand-lg navbar-light ">
14      <a class="navbar-brand" href="#"><img class="Airbnb_icon" src="https://cdn.user.blog.st-hatena.com/default_entry_og_image/112231897/1514240317721749" alt=""></a>
15      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
16        <span class="navbar-toggler-icon"></span>
17      </button>
18
19      <form class="form-inline my-2 my-lg-0 p-1">
20        <i class="fas fa-search m-2"></i>
21        <input class="mr-sm-2" type="search" placeholder="探す" aria-label="Search">
22      </form>
23
24      <div class="collapse navbar-collapse" id="navbarSupportedContent">
25        <ul class="navbar-nav mr-auto">
26          <li class="nav-item">
27            <a class="nav-link text-body" href="#">ホストを始める</a>
28          </li>
29          <li class="nav-item">
30            <a class="nav-link text-body" href="#">ヘルプ</a>
31          </li>
32          <li class="nav-item">
33            <a class="nav-link text-body" href="#">登録する</a>
34          </li>
35          <li class="nav-item">
36            <a class="nav-link text-body" href="#">ログイン</a>
37          </li>
38          <li class="nav-item dropdown">
39            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
40              <a class="dropdown-item" href="#">Action</a>
41              <a class="dropdown-item" href="#">Another action</a>
42              <div class="dropdown-divider"></div>
43              <a class="dropdown-item" href="#">Something else here</a>
44            </div>
45          </li>
46        </ul>
47      </div>
48    </nav>
49
50  </header>
51
52  <div class="top_message">
53    <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
54      <i class="far fa-comment-dots fa-2x"></i>
55      今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。
56      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
57        <span aria-hidden="true">&times;</span>
58      </button>
59    </div>
60
61    <div class="">
62
63    </div>
64  </div>
65
66  <div class="top_main">
67    <div class="top_contain">
68      <strong class="">旅を贈ろう。</strong>
69      <p> Airbnbギフトカードで、世界をぐんと身近に</p>
70      <button type="button" class="btn btn-light">ギフトカードを登録</button>
71    </div>
72  </div>
73
74  <div class="present container text-center">
75    <strong class="my-5">いつも完璧な贈りもの</strong>
76    <ul class="row">
77      <li class="col-xl-4 col-md-12">
78        <i class="far fa-envelope fa-3x d-block"></i>
79        <strong>簡単に使える</strong>
80        <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
81      </li>
82      <li class="col-xl-4 col-md-12">
83        <i class="fas fa-stopwatch fa-3x d-block"></i>
84        <strong>有効期限なし</strong>
85        <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
86      </li>
87      <li class="col-xl-4 col-md-12">
88        <i class="fas fa-globe-asia fa-3x d-block"></i>
89        <strong>忘れられない旅</strong>
90        <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
91      </li>
92    </ul>
93  </div>
94<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
95<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
96<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
97</body>
98</html>

css
1li {
2  list-style: none;
3}
4/*リセットcss*/
5html {
6  font-family: Circular, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic", "ＭＳ ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
7}
8
9header {
10  background-color: white;
11}
12
13.Airbnb_icon {
14  width: 40px;
15  height: 40px;
16}
17
18.navbar-nav {
19  position: absolute;
20  right: 10px;
21}
22
23.form-inline {
24  border-radius: 4px;
25  border: 1px solid #EBEBEB;
26  box-shadow: 0 1px 1px 1px #EBEBEB;
27}
28
29form input {
30  border-style: none;
31}
32
33.nav-item:hover {
34  border-bottom: 1px solid #484848;
35}
36
37.top_main {
38  background-image: url("https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg");/*imgフォルダから引っ張れなかった*/
39  background-size: cover;
40  height: 600px;
41}
42
43.top_main {
44  color: white;
45  padding: 200px 300px;
46}
47
48.top_contain strong{
49  font-size: 45px;
50}
51
52.top_contain p {
53  font-size: 17px;
54}
55
56.present strong {
57  font-size: 25px;
58}
59
60.present .row {
61  margin: auto;
62}
63
64.present li strong {
65  font-size: 15px;
66}