React Bootstrap表单中的对齐错误

Question

我正在使用react-boostrap表单，代码如下：

import React  from 'react';
import {Form, FormGroup, ControlLabel, HelpBlock, FormControl} from 'react-bootstrap';

class FirstForm extends React.Component {
    render() {
        return (
            <div className="Form">
                <Form horizontal>
                <FormGroup controlId="email">
                    <ControlLabel className="FormRow">Email</ControlLabel>
                    <FormControl type="text" placeholder="E-mail Id"/>
                </FormGroup>
             <FormGroup controlId="user">
            <ControlLabel className="FormRow">user name</ControlLabel>
            <FormControl type="text" placeholder="User name"  />
             </FormGroup>
                </Form>
            </div>
        );
    }
}

class App extends Component {
  render() {
    return (
        <div>
            <Header/>
            <FirstForm/>
        </div>

    );
  }
}

export default FirstForm;

在.css文件中，

.FormRow {
  justify-content: center;
  margin-right: 100px;
}

但输出显示为：

这是我添加的内容。剩余是从默认的react-app获得的。有人可以帮忙格式化吗？