入力フォームの一部のみ何故か中央配置になりません。

実現したいこと
入力フォームとセレクトボックスをすべて中央寄せにしたいのですが、付属画像のようにbangouのフォームだけ何故か少しずれてしまいます。これを、他のフォームと同じように中央寄せにしたいです。

付属画像

試してみたこと
.auto-style1 {

text-align: center;にしてみて、確かに真ん中にいきました。
しかし、どうしてもbangouのフォームだけずれてしまいます。text-align: center;は適応されているように思うですが、bangouだけずれるのか、謎です。

セレクトフォームのフォームの下の空間、select.plan{
margin-bottom: 21px;
}でフォーム間の空間をそろえてみたのですが、変化なし。最初、すべてのフォームがくっついていましたので。

原因が分かりません。

もしかしたら、他に同じ現象の人もいるかもしれないので、検索も一応してみましたが、これと似たような事例に辿り着けませんでした。

原因は何でしょうか？

回答よろしくお願いいたします。

html
1<!DOCTYPE html> 
2
3<html>
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7<meta name="viewport" content="width=device-width, initial-scale=1">
8 <title></title> 
9 <link rel="stylesheet" href="senden.css"> 
10
11
12<style type="text/css">
13
14/* 入力フォームの位置 */
15
16.auto-style1 {
17
18text-align: center;
19
20}
21
22
23/* セレクトボックスの位置 */
24.auto-style2 {
25
26text-align: center;
27/* セレクトボックス中央に配置 */
28margin-top: 90px;
29}
30
31</style>
32
33</head>
34<body>
35
36<form action="△" method="post">
37
38            <div class="auto-style2">
39                
40               
41    
42                
43    
44                    <span class="selectbox">
45                <select id="plan" class="plan" name="plan">
46                    <option value="">選択</option>
47
48     
49                </select>
50            </span>
51            </div>
52    
53
54
55            <div class="auto-style1">
56                　　
57               
58                <input type="text" class="bangou" name="bangou" id="bangou"
59                 value="" />
60            </div>
61            <div class="auto-style1">
62                
63                <input type="text" class="name" name="name" id="name" value="" />
64            </div>
65            <div class="auto-style1">
66                 <input type="text" class="furigana" name="furigana" id="furigana" value="" />
67                
68                </div>
69    
70                <div class="auto-style1">
71                <input type="text" class="tel" name="tel" id="tel" value="" />
72            </div>
73            <div class="auto-style1">
74                <input type="text" class="email" name="email" id="email"
75                    value="" />
76    
77                </div>
78                <div class="auto-style1">
79                <input type="text" class="lineid" name="lineid" id="lineid" value="" />
80            </div>
81
82 </form>
83
84</body>
85</html>
86
87

css
1/* 申し込みの注意事項ボックスのデザイン， */
2.box_css{
3  width:395px;
4  margin: 5em auto;/* ブロックレベルの中央寄せのためautoを用いる，text-align: center効かない */
5  margin-bottom: 50px;/* このボックスと文字入力フォームとの間の余白調節， */
6  border: solid 3px #f87902;
7  background-color: rgb(255, 255, 255);
8  padding-left: 14px;/* ボックス内左の余白 */
9  padding-right: 15px;/*ボックス内 右の余白 */
10  }
11
12
13
14
15
16
17/* 選択のセレクトボックスのデザイン1 */
18#plan{
19vertical-align: middle;
20box-sizing: border-box;
21border: 3px solid #63e02d;  /* 枠線 */
22background-color: snow;  /* 背景色 */
23width: 27.1em;             /* 横幅 */
24height: 53px;           /* 高さ */
25font-size: 1.0em;          /* テキスト内の表示文字サイズ */
26color: #000000;
27line-height: 1.2;  /* 行の高さ */
28
29}
30
31
32
33
34
35
36
37
38
39
40/* 入力フォームのスタイル */    
41#bangou {
42  
43      border: 3px solid #63e02d;  /* 枠線 */
44      padding: 0.5em;          /* 内側の余白量 */
45      background-color: snow;  /* 背景色 */
46      width: 25.5em;             /* 横幅 */
47      height: 30px;           /* 高さ */
48      font-size: 1em;          /* テキスト内の表示文字サイズ */
49      line-height: 1.2;         /* 行の高さ */
50    
51    }
52  
53#name {
54  
55  border: 3px solid #63e02d;  /* 枠線 */
56  padding: 0.5em;          /* 内側の余白量 */
57  background-color: snow;  /* 背景色 */
58  width: 25.5em;             /* 横幅 */
59  height: 30px;           /* 高さ */
60  font-size: 1em;          /* テキスト内の表示文字サイズ */
61  line-height: 1.2;         /* 行の高さ */
62
63}
64
65#furigana {
66  
67  border: 3px solid #63e02d;  /* 枠線 */
68  padding: 0.5em;          /* 内側の余白量 */
69  background-color: snow;  /* 背景色 */
70  width: 25.5em;             /* 横幅 */
71  height: 30px;           /* 高さ */
72  font-size: 1em;          /* テキスト内の表示文字サイズ */
73  line-height: 1.2;        /* 行の高さ */
74  
75}
76
77#tel {
78  
79  border: 3px solid #63e02d;  /* 枠線 */
80  padding: 0.5em;          /* 内側の余白量 */
81  background-color: snow;  /* 背景色 */
82  width: 25.5em;             /* 横幅 */
83  height: 30px;           /* 高さ */
84  font-size: 1em;          /* テキスト内の表示文字サイズ */
85  line-height: 1.2;        /* 行の高さ */
86}
87
88#email {
89  
90  border: 3px solid #63e02d;  /* 枠線 */
91  padding: 0.5em;          /* 内側の余白量 */
92  background-color: snow;  /* 背景色 */
93  width: 25.5em;             /* 横幅 */
94  height: 30px;           /* 高さ */
95  font-size: 1em;          /* テキスト内の表示文字サイズ */
96  line-height: 1.2;        /* 行の高さ */
97}
98
99#lineid{
100
101  
102  border: 3px solid #63e02d;  /* 枠線 */
103  padding: 0.5em;          /* 内側の余白量 */
104  background-color: snow;  /* 背景色 */
105  width: 25.5em;             /* 横幅 */
106  height: 30px;           /* 高さ */
107  font-size: 1em;          /* テキスト内の表示文字サイズ */
108  line-height: 1.2;        /* 行の高さ */
109}
110
111
112
113select.plan{
114  margin-bottom: 21px;
115}
116
117
118/* 入力フォームとフォーム間の上下の余白， */
119
120
121input.bangou{margin:27px 0px;}
122input.name{margin:21px 0px;}
123input.furigana{margin:21px 0px;}
124input.tel{margin:21px 0px;}
125input.email{margin:21px 0px;}
126input.lineid{margin:21px 0px;}
127

行動規範の内容に同意します

回答1件

ベストアンサー

全角空白が入っています。

HTML
1            <div class="auto-style1">
2                >　　< ここ

投稿2021/06/26 09:04

kei344

総合スコア69606

gujhufiugho

2021/06/26 09:26

ありがとうございます。全く気づきませんでした。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

入力フォームの一部のみ何故か中央配置になりません。

関連した質問