Bootstrapで文章周辺に余白を作ることができません。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML Bootstrap　cssを使い、webサイトの制作を行っています。
目標は(https://www.airbnb.jp/gift)にある、「旅を贈ろう。」というページのボタンを含めた個々の文章間における余白、ボタンを含めた文章を一つの塊と見た時の、その上下の余白を作り出すことですが、自分の書いたコードでは余白を作ることができませんでした。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

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
11    <title>hello</title>
12    <style>
13      .cover{
14        background:url(img/waves.jpg);
15        background-size:cover;
16      }
17      
18
19    </style>
20  </head>
21  <body>
22    <header>
23
24    </header>
25
26    <main>
27      <section class="cover　py-50">
28        <div class="container ">
29          <h1 class="text-white ">旅を贈ろう。</h1>
30          <p class="text-white ">Airbnbギフトカードで、世界をぐんと身近に</p>
31          <a href="#"class="btn">ギフトカードを登録</a>
32
33        </div>
34
35      </section>
36    </main>

試したこと

paddingやmarginはBootstrapで指定された形で書いてみました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2019/05/13 05:40

＞うまくいきません。誰にも何も伝わらない表現なので、起きている問題・現象を具体的に記載してください。 https://teratail.com/help/question-tips#questionTips3-4 また「余白を作りたい」だけでは「どうしたいのか」が質問者さんの感覚であるため具体的なイメージが伝わりません。現在の状態と「目標とする状態」がわかるイメージを添付してください。

dit.

2019/05/13 06:26

余白を作るためにどのようなことを試しましたか？ Bootstrapで実装したい場合https://getbootstrap.jp/docs/4.2/utilities/spacing/この辺が参考になると思いますがいかがでしょうか？

b3b3b3

2019/05/13 06:36

paddingやmarginはBootstrapで指定された形で書いてみましたが、変化なしでした。

dit.

2019/05/13 06:38

py-*の形の場合、0～5の6段階ではないでしょうか？また、cover　py-50の間が全角のためうまくclass指定ができてないようにも思います。ピクセルで指定したい場合はご自身でCSSを記述することになるかと思います。

b3b3b3

2019/05/13 06:53

ご指摘ありがとうございます、おかげで空白を作ることができました。指定の形になっていなかったですね。何度も申し訳ないですが、６段階では空白の幅、高さが足りない場合は、ｃｓｓに記述することになるのでしょうか。

dit.

2019/05/13 07:03

先ほど提示したURL内には「$spacer の基準値は1rem=16px。$spacers Sassマップ変数にエントリを追加することで, さらにサイズの追加が可能です。」となっており、その下のExamplesに書き方が書いてあります。わかりづらければ独自でclassを追加し、自身でCSSを追記した方がやりやすいかもしれません。 padding:50px 0;で上下は50pxずつ、左右は0の様な指定ができます。

b3b3b3

2019/05/13 07:10

丁寧な回答ありがとうございます。自分で確認するべきでしたと反省中です。

dit.

2019/05/13 07:15

自分の思い通りにならない状況に遭遇すると、視野が狭くなるのは仕方のないことです。同じような問題にぶつかってこの質問にたどり着いた方のためにも、「どこを直し解決したか」を自己解決として書いていただければと思います。

b3b3b3

2019/05/13 07:34

今後そのような点は改善します。自己解決の欄、書かせていただきました。今回は本当にありがとうございました。