Javascript 表单不像react表单中的其他标记那样左对齐

因此，我尝试将我的表单与整个文本格式对齐，使每个文本格式都向左对齐，但看起来是这样的：

目标是让所有表单在绿色的左边对齐。我试图通过强制

0px

来删除

左边距，但它不起作用

以下是表单本身的代码：

const AccountForm = <div>
            <Form style={{backgroundColor: "#00ff00"}}className="form-form-settings">
            <Form.Row style={{width: "100%"}}>
                <Form.Group as={Col} controlId="formGridFirstName">
                    <Form.Label className="form-label-settings">First Name</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.firstName}/>
                </Form.Group>

                <Form.Group as={Col} controlId="formGridLastName">
                    <Form.Label className="form-label-settings">Last Name</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.lastName} />
                </Form.Group>
            </Form.Row>
            <Form.Row style={{width: "100%"}}>
                <Form.Label className="form-label-settings">Username</Form.Label>
                <Form.Control bsPrefix="form-control-settings" type="text" placeholder="" value={this.state.userInfo.userName}/>
            </Form.Row>
            <Form.Row style={{width: "100%"}}>
                <Form.Label className="form-label-settings">Email</Form.Label>
                <Form.Control bsPrefix="form-control-settings" type="email" placeholder="" value={this.state.userInfo.email}/>
            </Form.Row>
            { !updatePassword && 
                <Form.Row style={{width: "100%", marginBottom: "20px"}}>
                    <Form.Label className="form-label-settings" >Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
                </Form.Row>
            }
            {
               updatePassword &&  
                <Form.Row style={{width: "100%"}}>
                    <Form.Label className="form-label-settings">Current Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder="" value="123"/>
                </Form.Row>
            }
            {
               updatePassword && 
                <Form.Row style={{width: "100%", marginBottom: "20px"}}>
                    <Form.Label className="form-label-settings">New Password</Form.Label>
                    <Form.Control bsPrefix="form-control-settings" type="password" placeholder=""/>
                </Form.Row>
            }

            </Form>
            </div>;


知道吗，如何确保字段使用了所有宽度空间？我不希望有任何边距
删除
左边距：自动；右边距：自动来自类
表单设置
我认为页边距左自动右自动的问题可能最好尝试使用flexbox将元素居中，并将子元素与
自对齐或内容对齐
。而不是在
表单设置中使用边距
您可以将它们写在一行中，我认为这样更好。
如果这是React Bootstrap，则删除
输入
元素上的边距。如果我在这一点上错了，只需使用浏览器的开发工具查看哪些元素附加了页边距/填充，然后使用CSS将其删除。嗨，这并不能解决问题。如果看不到元素对齐，很难说出解决方案。我建议使用display:flex。它非常容易处理对齐。供参考：
<div className="settings-tab-right">
                <h1> {TextContents.Account} </h1>
                <div>
                {AccountForm}
                {!updatePassword  && <a href="#" className="settings-link-like-btn" onClick={this.onUpdatePassword}>{TextContents.UpdatePassword}</a>}
                {updatePassword  && <a href="#" className="settings-link-like-btn" onClick={this.onSavePassword}>{TextContents.SavePassword}</a>}
                <div style={{width: "100%", textAlign: "right"}}>
                    <Button style={{marginLeft:"0px"}} bsPrefix="blue-btn-no-space" ref="#">{TextContents.SaveChanges}</Button> 
                </div>
                </div>
            </div>;


  .form-label-settings {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.51;
    letter-spacing: normal;
    text-align: left;
    color: #cecece;
    margin-top: 10px;
    margin-left: 20px;
}

.form-control-settings {
    object-fit: contain;
    border-radius: 20px;
    background-color: #f4f7f8;
}

.form-form-settings {
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right:auto;
    width: 100%;
}

.settings-tab-right{
    margin: 40px 40px 40px 40px;
}