フォームのレスポンシブがうまくいかない

実現したいこと

フォームのレスポンシブでフォーム欄を中央に配置したいです。

お手数をおかけいたしますがよろしくお願いいたします。

発生している問題・分からないこと

現状画像のように少し右側に寄っているのを修正したいと思っております。

PCの見た目も添付しております。

該当のソースコード

html

1<section id="form">2 <div class="form_container">3 <img class="form_bg_img" src="images/contact_bg.png" alt="">4 <div class="form_content">5 <h4 class="form_title">お問い合わせ</h4>6 <p class="form_title_sub">まずは無料相談。お気軽にご相談ください。</p>7 <p class="form_text">下記フォームへ必要事項をご記入の上、送信ください</p>8 <div class="form_wrapper">9 <form action="" method="post">10 <div class="form_content_items">11 <div class="form_name_box">12 <div class="form_group">13 <input type="text" name="name" class="form_name_field" placeholder="姓" required>14 </div>15 <div class="form_group">16 <input type="text" name="name" class="form_name_field" placeholder="名" required>17 </div>18 </div>19 <div class="form_group">20 <input type="text" name="message" class="form_field" placeholder="〇〇〇〇〇〇会社">21 </div>22 <div class="form_group">23 <input type="telephone" name="telephone" class="form_field" placeholder="電話番号(ハイフンなし)" required>24 </div>25 <div class="form_group">26 <input type="text" name="message" class="form_field" placeholder="部門を入力してください">27 </div>28 <div class="form_group">29 <input type="text" name="message" class="form_field" placeholder="役職を入力してください">30 </div>31 <p class="form_privacy"><span class="form_privacy_under">プライバシーポリシー</span>に同意の上、送信ください。</p>32 <div class="form_email_content">33 <i class="far fa-envelope"></i>34 <input type="submit" value="お問い合わせ">35 </div>36 </div>37 </form>38 </div>39 </div>40 </div>41 </section>

css

1.form_container {2 position: relative;3 width: 100%;4 height: 100%;5}6 7img.form_bg_img {8 width: 100%;9 height: 900px;10}11 12.form_content {13 position: absolute;14 top: 50%; /* コンテナの中央に配置 */15 left: 50%; /* コンテナの中央に配置 */16 transform: translate(-50%, -50%); /* テキストのサイズを考慮して中央に配置 */17}18 19.form_title {20 font-weight: bold;21 font-size: 24px;22 text-align: center;23 color: #fff;24 margin: 0;25}26 27.form_title_sub {28 text-align: center;29 color: #fff;30 padding-bottom: 52px;31}32 33.form_text {34 color: #fff;35 padding-bottom: 12px;36 font-size: 13px;37 font-weight: bold;38}39 40.form_content_items {41 display: grid;42 gap: 24px;43}44 45.form_name_box {46 display: grid;47 grid-template-columns: 200px 200px;48 gap: 72px;49}50 51@media screen and (max-width:768px) {52 .form_name_box {53 grid-template-columns: 1fr;54 gap: 12px;55 }56}57 58.form_name_field {59 width: 100%;60 padding: 18px 26px;61 border-radius: 8px;62 color: #333333;63}64 65.form_name_field::placeholder {66 color: #B4B4B4;67}68 69.form_field {70 width: 100%;71 padding: 18px 26px;72 border-radius: 8px;73 color: #333333;74}75 76@media screen and (max-width:768px) {77 .form_field {78 width: 100%;79 }80}81

試したこと・調べたこと

上記の詳細・結果

色々と変更したりしましたがどれもうまくいかず、現状のソースコードとなっております。

補足

特になし