反应：内容无法正确调整网页中的表单

Question

我正在使用ReactStrap构建我的Web应用程序。这是我的代码：

class Address extends React.Component {

  render() {
    return (

      <Media body>
        <Container>
          <Form>
            <FormGroup className="d-block">
              <Label for="address1">Address line 1</Label>
              <Input type="text" name="address1" id="address1" />
            </FormGroup>

            <Row form>
              <Col sm={5}>
                <FormGroup className="d-block">
                  <Label for="zip">ZIP</Label>
                  <Input type="text" name="text" id="zip" />
                </FormGroup>
              </Col>

              <Col sm={2}>
                <FormGroup className="d-block">
                  <Label for="state">State: </Label>
                  <Input type="select" name="select" id="state">
                    <option>IL</option>
                    <option>AZ</option>
                  </Input>
                </FormGroup>
              </Col>

              <Col sm={3} className="d-block">
                <FormGroup>
                  <Label for="Country">Country: </Label>
                  <Input type="select" name="select" id="Country">
                    <option>United States</option>
                    <option>Canada</option>
                  </Input>
                </FormGroup>
              </Col>
            </Row>

            <Button>Submit</Button>
          </Form>
        </Container>
      </Media>
    )
  }
}

以下是它在网页中的显示方式：

我只想知道为什么它没有正确排列在左侧以及如何解决。谢谢。

编辑：正如刚才的代码所告知的那样，这是因为在style.css中，我具有以下内容：

form div {
  margin: 1em;
}