inputとlabelの関係性や書き方、ボタンが内側に入らない原因

Question

前提・実現したいこと

1inputとlabelのプライバシー～横並びにならないため、横並びにしたいです。
2.form-bg内にコードを書いているのに送信するボタンが白いバック内に入らない。

下記に完成図と現状を添付いたします

何卒宜しくお願い致します。

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

inputとlabelのプライバシー～横並びにならない
ボタンが

該当のソースコード

<section class="contact">
            <div class="inner">
                <p class="jp-ttl con-ttl">お問い合わせ</p><!-- /.jp-ttl -->
                <p class="en-ttl con-ttl">contact</p><!-- /.en-ttl -->
            
                <p class="message">コーディングの人出が足りないとき、<br> あなたの力になります</p>
                <div class="form-bg">
                    <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfyhr5CGpd1GWI1uP0lrjBuJWEFlpVsisPENuAR06FGfxUGwQ/formResponse">
                        <div class="form-item">
                            <div class="form-fx">
                                <p class="item">お名前</p><!-- /.item -->
                                <p class="necessary">必須</p><!-- /.necessary -->
                            </div><!-- /.form-fx -->
                            <input type="text" name="name">
                        </div><!-- /.form-item -->
                       
                        <div class="form-item">
                            <div class="form-fx">
                                <p class="item">メールアドレス</p><!-- /.item -->
                                <p class="necessary">必須</p><!-- /.necessary -->
                            </div><!-- /.form-fx -->
                            <input type="text" name="e-mail">
                        </div><!-- /.form-item -->
                        
                        <div class="form-item">
                            <div class="form-fx">
                                <p class="item">お問い合わせ内容</p><!-- /.item -->
                                <p class="necessary">必須</p><!-- /.necessary -->
                            </div><!-- /.form-fx -->
                            <textarea name="entry" type="text"　rows="4" cols="60"></textarea>
                        </div><!-- /.form-item -->
                        
                        <div class="agree">
                            <label class="policy" for="policy">
                                <input class="checkbox" type="checkbox" name="policy" value="required">プライバシーポリシーに同意する</div><!-- /.agree -->
                               </label>
                        </div><!-- /.agree -->
                        <div class="sent-btn cmn-link">
                            <input type="submit" value="送信する">
                        </div><!-- /.sent-btn -->
                    </form>
                </div><!-- /.form-bg -->
            </div><!-- /.inner -->
        </section><!-- /.contact -->

.contact {
  width: 1366px;
  height: 1027px;
  background: -webkit-gradient(linear, left top, right top, from(#05A5FA), color-stop(#63FBD7), to(#67FFD6));
  background: -webkit-linear-gradient(left, #05A5FA, #63FBD7, #67FFD6);
  background: linear-gradient(to right, #05A5FA, #63FBD7, #67FFD6);
}

.con-ttl {
  color: #fff;
}

.message {
  color: #fff;
  text-align: center;
}

.form-bg {
  width: 70%;
  height: 67%;
  background-color: #fff;
  border: 1px solid #00000029;
  -webkit-box-shadow: 0px 3px 6px #00000029;
          box-shadow: 0px 3px 6px #00000029;
  margin: 44px 230px auto;
}

.form-bg .form-item {
  padding-left: 62px;
}

.form-bg .form-item .form-fx {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 34px;
}

.form-bg .form-item .form-fx + .form-item {
  padding-top: 27px;
}

.form-bg .form-item .form-fx .item {
  margin-right: 20px;
}

.form-bg .form-item .form-fx .necessary {
  display: block;
  background-color: #0C449B;
  width: 60px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  padding: 5px;
}

.form-bg .form-item input {
  width: 500px;
  height: 43px;
  border-radius: 3px;
  background-color: #EEFBFB;
  margin-top: 39px;
}

.form-bg .form-item textarea {
  background-color: #EEFBFB;
  margin-top: 39px;
}

.form-bg .agree {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: baseline;
}

.form-bg .agree .policy {
  display: block;
}

.form-bg .agree .checkbox {
  display: block;
}

.form-bg .sent-btn {
  padding: 30px auto;
  margin: 0 auto;
}

.form-bg .sent-btn p {
  text-align: center;
}

.footer {
  background-color: #F8F8F8;
}

.footer .logo-text {
  text-align: center;
  font-weight: bold;
  padding-top: 43px;
  padding-bottom: 21px;
}

試したこと

1agree部分のlabelをinputの下に置くとinput~とプライバシーに同意するが横並びになりますが
inputとlabelの位置関係はどうやらlabelでinputを囲むか、labelタグ間に文言を書くかのどちらかがいいようです。
→上手に横並びにできません。

2グーグルツールを使い、margin,paddomgを触っていたものの、変更できず。
→考えられることが画像のようにチェックボックスが縦並びで入らないのでは？と考え、無理やりinputとlabelを横並びにしましたが、ボタンは入らないです。

Answer 1

1inputとlabelのプライバシー～横並びにならないため、横並びにしたいです。

チェックボックスが display: block になているためです。↓のルールセットは消しましょう。

.form-bg .agree .checkbox {
  display: block;
}

2.form-bg内にコードを書いているのに送信するボタンが白いバック内に入らない。

<label> の中に余計な </div>があるせいです。消しましょう。

<label class="policy" for="policy">
    <input class="checkbox" type="checkbox" name="policy" value="required"
>プライバシーポリシーに同意する</div><!-- /.agree -->
   </label>

Comments

[free_teku]

ご回答ありがとうございます。

解決できました。

アドバイスをいただき
たしかに、そうでした。display: block;はたてひょうじですね。

blockじゃないとpadding,marginなど上下左右反応しないので、やみくもにしていました。反省です

一点：追加で質問したいのですが、
Q.
送信するんボタンの「input 」送信するテキストですが、こちらを中央配置にしたい場合はtext-align
centerではいけないのでしょうか？

どんなコードを書くと良いのか教えていただけると幸いです。

[int32_t]

> 一点：追加で質問したいのですが、

もとの質問にはない問題ですので、「input ボタン センタリング」で検索してから別の質問を立ててはいかがでしょうか。

[free_teku]

かしこまりました。失礼いたしました。

Answer 2

<label class="policy" for="policy">
  <input class="checkbox" type="checkbox" name="policy" value="required">プライバシーポリシーに同意する</div><!-- /.agree -->
</label>

余計な</div>が紛れ込んでいます。

Comments

[maisumakun]

タグのネストが崩れると、全体的にめちゃくちゃになる危険もあります。

[free_teku]

ご回答ありがとうございます。

確かに余計なものがありました。
それぞれを区分けして小さくすると、ミスが見当たりにくいことがあると学べました。