So I am trying to align my form and the overall text format aroung to have every align left but it looks like this :

[![enter image description here](https://i.stack.imgur.com/FF9Gf.png)](https://i.stack.imgur.com/FF9Gf.png)

The goal is to have all the Form align on the left of the green. I tried to remove the `left-margin` by forcing it to `0px` but it's not working.

Here is the code for the form itself:

```
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>;

```

and the form is stored in

```
<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>;

```

and css associated:

```
  .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;
}

```

Any idea, how to make sure that the field used all the width space ? I am not looking to have any margin