Bootstrapでフォーム内の要素位置を変更したい

Bootstrapを使ってユーザー情報の登録画面を作成しています。
性別を選ぶラジオボタンとパスワードの入力フォームの位置を離したいのですが、ラジオボタンを括ったdiv要素radio-locationクラスにmargin-top: 40px;としても反映されません。

色々試してみたところ、radio-locationクラス自体が無効になっているようです。

原因がわかる方いらっしゃいましたらご教授ください。

HTML
1  <form action="/register" method="post">
2    <div class="form-group">
3      <label for="exampleInputEmail1">メールアドレス</label>
4      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="username">
5    </div>
6    <div class="form-group">
7      <label for="exampleInputPassword1">パスワード</label>
8      <input type="password" class="form-control" id="exampleInputPassword1" name="password">
9    </div>
10    <div class="radio-location"> 
11      <div class="custom-control custom-radio custom-control-inline">
12        <input type="radio" id="customRadioInline1" name="gender" value="male" class="custom-control-input">
13        <label class="custom-control-label" for="customRadioInline1">男性</label>
14      </div>
15      <div class="custom-control custom-radio custom-control-inline">
16        <input type="radio" id="customRadioInline2" name="gender" value="famale" class="custom-control-input">
17        <label class="custom-control-label" for="customRadioInline2">女性</label>
18      </div>
19    </div>
20    <button type="submit" class="btn btn-primary btn-submit">送信</button>
21  </form>

CSS
1.radio-location {
2  display: block;
3  margin-top:40px;
4}
5
6.btn-submit {
7  display: block;
8  height: 70px;
9  width: 120px;
10  margin-top: 40px;
11}

akihiro3

2020/08/05 05:41

現在のコードで反映されてますよ？

hatena19

2020/08/05 05:45

提示のコードで確認してましたか、ちゃんと反映されてましたよ。実際のコードにタイポかないか、別の部分で上書きしていないか、確認してみてください。デベロッパーツールを使うと適用されているCSSを確認できます。 Bootstrapを使うなら、mt-5 とかのクラスをついかするだけでマージンを設定できますので、そらくも検討してみては。 https://design-studio-f.com/blog/bootstrap-utilities-spacing/