レスポンシブデザイン　フォームが中央に配置されないものがある。

実現したいこと
画面幅（〜480px）までのスマホのレスポンシブ対応のコードを書いているのですが、初心者なのでまずこれ１つから。
入力フォームをスマホの横幅いっぱいにして、中央に配置させるコードを書いているのですが上手くいきません。ｐｈｐのフォイルにＨＴＭＬのコードを書いて、ＣＳＳのコードとスタイルシートで別にも書いてあります。
クロームでレスポンシブを確認する機能を使って確認しているのですが、横幅４１４の大きさは丁度真ん中配置されているのですが、それ以外の横幅３６０、３２０，３７５など、付属画像のようにフォームの横幅がいっぱいにならず、ずれてしまって困っています。

入力フォームの名前のフォーム１つだけならきちんとレスポンシブ対応きちんと適応されます。しかし、名前のフォーム以外に「フリガナ」「電話番号」のＨＴＭＬとＣＳＳをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。

試したこと
レスポンシブ対応のＣＳＳコードにwitdh１００％と記載した入力フォームと記載していない入力フォームをクロームのレスポンシブ確認画面で比べてみたのですが、witdh１００％と書いたフォームは確かに真ん中の配置に近くなっています。witdh１００％と書いていないフォームは全然はみ出ていましたので、適応されていないはずはないと思うのですけども。途方に暮れています。

質問してから再度試したこと
確かに回答に下さった通り、提示したコードでレスポンシブ対応はきちんとされていました。しかし、複数入力フォームがあるのですが、名前を入力するフォームのみなら、ｐｈｐコード内にあるＨＴＭＬとＣＳＳでレスポンシブ対応はきちんとなりました。しかし、名前のフォーム以外にも「フリガナ」「電話番号」のＨＴＭＬとＣＳＳをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。
ＰＨＰのコードに新たに、「フリガナ」「電話番号」のＨＴＭＬと、ＣＳＳのコードにそのデザインのコードを追加しました。

付属画像
４１１ｐｘの画像　ＯＫ

ずれている

ずれている

ずれている

php
1<?php
2session_start();
3
4$errors = array();
5if(isset($_POST['submit'])) { 
6$name = $_POST['name'];
7
8if($name === "") { $errors['name'] ="名前が入力されていません。 ";
9}
10if(count($errors) === 0) {
11$_SESSION['name'] = $name; 
12
13header('Location:http://△△');
14  exit();
15   }
16}
17if(isset($_GET['action']) && $_GET['action'] === 'edit'){
18$name = $_SESSION['name'];
19 } 
20?> 
21
22<!DOCTYPE html> 
23
24<html>
25
26<head>
27<meta content="text/html; charset=utf-8"/>
28<meta name="viewport" content="width=device-width, initial-scale=1">
29 <title>お問い合わせ</title> 
30 <link rel="stylesheet" href="syoki.css"> 
31 <link rel="stylesheet" href="responsive.css"> 
32
33 <style>
34
35 /* 入力フォームの位置 */     
36 .auto-style1 {
37	 margin: auto;
38	 text-align: center;
39   }
40</style>
41<?php echo "<ul>";foreach($errors as $value) {
42
43echo "<li>"; 
44echo $value; 
45echo "</li>"; 
46} 
47
48echo "</ul>";
49?>
50
51</head>
52<body>
53
54<form action ="hpform1.php" method ="post" class="auto-style1">
55 
56  <div class="auto-style1">
57         
58    <p class="px-num"> 
59名前：※
60    </p>
61<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>"/>
62
63<p class="px-num"> 
64  フリガナ：※
65  </p>
66  <input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>"/>      
67  
68  <p class="px-num">      
69  電話番号：※
70  </p>
71  
72  <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>"/>     
73  </div>
74 
75  <div class="enter">  
76 
77    <button type="submit" name ="submit" class="auto-style4" height="230px" width="813">
78    <img src="enter.png"  alt="確認画面へ" class="auto-style3" height="230px" width="813"/></button>
79  </div>
80</form>
81 </body></html>
82
83
84

ｃｓｓのコード(syokicss)

css
1/* 入力フォームのスタイル */
2#name {
3    
4    border: 3px solid #63e02d;  /* 枠線 */
5    background-color: snow;  /* 背景色 */
6    width: 29.3em;             /* 横幅 */
7    height: 56px;           /* 高さ */
8    font-size: 1em;          /* テキスト内の表示文字サイズ */
9    line-height: 1.2;         /* 行の高さ */
10    box-sizing: border-box;
11}
12#furigana {
13    
14    border: 3px solid #63e02d;  /* 枠線 */
15    padding: 0.5em;          /* 内側の余白量 */
16    background-color: snow;  /* 背景色 */
17    width: 27.8em;             /* 横幅 */
18    height: 36px;           /* 高さ */
19    font-size: 1em;          /* テキスト内の表示文字サイズ */
20    line-height: 1.2;        /* 行の高さ */
21    box-sizing: border-box;
22}
23
24#tel {
25    
26    border: 3px solid #63e02d;  /* 枠線 */
27    padding: 0.5em;          /* 内側の余白量 */
28    background-color: snow;  /* 背景色 */
29    width: 27.8em;             /* 横幅 */
30    height: 36px;           /* 高さ */
31    font-size: 1em;          /* テキスト内の表示文字サイズ */
32    line-height: 1.2;        /* 行の高さ */
33}

ｃｓｓのレスポンシブ対応コード(responsive.css)　

css
1/* 画面幅（〜480px以下の時までの適応）指定 */
2@media screen and (max-width : 480px){
3  #name {
4    
5   width: 100%;
6
7  }
8 
9}
10.auto-style1{
11width:100%;
12margin: auto;
13	 text-align: center;
14}

itagagaki

2021/05/15 09:39

わかりませんが、試しに #name に max-width: 100%; を入れてみてください。

gujhufiugho

2021/05/15 12:16

回答ありがとうございます。変化ないです。

itagagaki

2021/05/15 12:52

私も質問のコードをそのままファイルにしてApache経由でChromeやEdgeのレスポンシブ確認画面でチェックしてみました。ズレも余白もありませんでしたよ？

gujhufiugho

2021/05/15 13:26

そうなんですか？ありがとうございます。実機でも試して見ます。パソコンにも原因があるかもしれませんね。調べて見ます。回答ありがとうございます。

gpsoft

2021/05/15 15:24

ちなみに、 submitボタンの中にあるimg要素にwidth="813"が付いてますが、意図したものですか?

gujhufiugho

2021/05/15 20:41

回答ありがとうございます。そうですね。パソコン用だと，大きさが丁度よいです。

mari.rinn

2021/05/15 22:04 編集

.auto-style1のmarginが現在はautoになってますが、通常、中央寄せする場合は、margin:0 auto;のように、上下の値は指定する形にするのが普通なので、そのようにしてみるとどうですか？更にinputにもそれをつけてみられたらどうでしょうか？

gujhufiugho

2021/05/16 12:16

回答ありがとうございます。つけてみても変わりませんでした。しかし、以下のことがわかりました。入力フォームの名前のフォーム１つだけならきちんとレスポンシブ対応きちんと適応されていました。。しかし、名前のフォーム以外に「フリガナ」「電話番号」のＨＴＭＬとそのＣＳＳのデザインをコードに追加すると、付属画像のようにレスポンスがおかしくなってしまいます。「フリガナ」「電話番号」のＨＴＭＬとそのＣＳＳのデザインのコードに新たに追加しました。

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

回答2件

#furiganaと#telが画面幅を超えています。Chromeでは全体が入るように表示しちゃっていて、その分#nameの右に余白ができたように見えています。

投稿2021/05/16 12:33

itagagaki

総合スコア8402

gujhufiugho

2021/05/16 12:52

ありがとうございございます。telの長さも全部同じ（提示通りのコードでもレスポンシブ対応になりました。box-sizing: border-box;/* 追加 */margin:0 auto;/* 追加 */ text-align: center;/* 追加 */　でなりました。一応真ん中にはきました。ただ、ご指摘の通り、フォーム結構大きいですね。また、調節してみます。回答ありがとうございました。

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

自己解決

回答ありがとうございました。解決できました。なぜか、入力フォームのHTMLとCSSを項目ごとにひとつ貼り付けしなおしたらレスポンシブ対応になりました。

コードも回答くださった方の通りでした。
フォームのデザインのCSS　名前（＃nameも同様のコード）でなりました。
#furigana {
margin:0 auto;/* 追加 /
text-align: center;/ 追加 /
border: 3px solid #63e02d; / 枠線 /
padding: 0.5em; / 内側の余白量 /
background-color: snow; / 背景色 /
width: 27.8em; / 横幅 /
height: 36px; / 高さ /
font-size: 1em; / テキスト内の表示文字サイズ /
line-height: 1.2; / 行の高さ /
box-sizing: border-box;/ 追加 */