CSS 連なるテキストボックスとボタンをセンタリングしたい

下記のようにmargin-leftとrightをautoにして左に寄ってしまいます。
当たり前ですが、margin-left固定値にすると、ブラウザ小さくするとずれてしまうので、
このような場合、何が設定できますでしょうか。

CSS
1@import "reset";
2@import "grid";
3
4.HomePage {
5  color: grey;
6  text-align: center;
7  margin-top: 20%;
8  .input-group-prepend{
9    margin-left: auto;
10    margin-right: auto;
11    }
12  .form-control{
13    width:300px;
14  }
15  }

React
1	return (
2		<div className="HomePage">
3			{!token ? (
4				<>
5					<button
6						onClick={() => setToggle(!toggle)}
7						className="btn btn-secondary"
8					>
9						{toggle
10							? 'Not registered yet? Register'
11							: 'Already registered? Log in here'}
12					</button>
13					{toggle ? (
14						<form onSubmit={handleLogin} className="input-group-prepend">
15							<input
16								type="text"
17								id="username"
18								value={user.username}
19								onChange={handleChange}
20								className="form-control"
21								placeholder="username"
22							/>
23							<input
24								type="password"
25								id="password"
26								value={user.password}
27								onChange={handleChange}
28								className="form-control"
29								placeholder="password"
30							/>
31
32							<input type="submit" value="Login" className="input-group-text" />
33						</form>
34					) : (
35						<form onSubmit={handleRegister} className="input-group-prepend">
36							<input
37								type="text"
38								id="username"
39								value={user.username}
40								onChange={handleChange}
41								className="form-control"
42								placeholder="username"
43							/>
44							<input
45								type="password"
46								id="password"
47								value={user.password}
48								onChange={handleChange}
49								className="form-control"
50								placeholder="password"
51							/>
52							<input
53								type="submit"
54								value="Register"
55								className="input-group-text"
56								id=""
57							/>
58						</form>
59					)}
60				</>
61			) : (
62				<>
63					<div>Hello {loggedInUser},</div>
64					{''}
65					<br />
66					{''}
67					<div>
68						<button
69							href="#"
70							onClick={handleLogout}
71							className="btn btn-secondary"
72						>
73							Logout
74						</button>
75					</div>
76				</>
77			)}
78		</div>
79	);
80}
81

m.ts10806

2021/08/30 21:18

HTMLとcssは基本全て提示してください。現状が再現できないと応えようがありません。

agumon

2021/08/31 02:39

今の説明だとよくわからないのでもう少し具体的にお願いします。

hiro_ike

2021/08/31 05:23

度々申し訳ないです。画像の２行目にあります、テキストボックス２つとボタン１つの塊が、「input-group-prepend」になるのですが、この行をセンタリングしたかったのですが、margin指定のautoが効かなかったため、あと先頭のテキストボックスを指定してみたりしたのですが、うまく動かすことが出来ずご相談でした。

m.ts10806

2021/08/31 05:24

React,SCSSのタグがないと回答得られないと思います。

hiro_ike

2021/08/31 05:32

ありがとうございます、タグ追加しました。