title: React: Content is not adjusting right on form in webpage
body: <p>I am using ReactStrap to build my web application. This is my code:</p>
  
  <pre><code>class Address extends React.Component {
  
    render() {
      return (
  
        &lt;Media body&gt;
          &lt;Container&gt;
            &lt;Form&gt;
              &lt;FormGroup className="d-block"&gt;
                &lt;Label for="address1"&gt;Address line 1&lt;/Label&gt;
                &lt;Input type="text" name="address1" id="address1" /&gt;
              &lt;/FormGroup&gt;
  
              &lt;Row form&gt;
                &lt;Col sm={5}&gt;
                  &lt;FormGroup className="d-block"&gt;
                    &lt;Label for="zip"&gt;ZIP&lt;/Label&gt;
                    &lt;Input type="text" name="text" id="zip" /&gt;
                  &lt;/FormGroup&gt;
                &lt;/Col&gt;
  
                &lt;Col sm={2}&gt;
                  &lt;FormGroup className="d-block"&gt;
                    &lt;Label for="state"&gt;State: &lt;/Label&gt;
                    &lt;Input type="select" name="select" id="state"&gt;
                      &lt;option&gt;IL&lt;/option&gt;
                      &lt;option&gt;AZ&lt;/option&gt;
                    &lt;/Input&gt;
                  &lt;/FormGroup&gt;
                &lt;/Col&gt;
  
                &lt;Col sm={3} className="d-block"&gt;
                  &lt;FormGroup&gt;
                    &lt;Label for="Country"&gt;Country: &lt;/Label&gt;
                    &lt;Input type="select" name="select" id="Country"&gt;
                      &lt;option&gt;United States&lt;/option&gt;
                      &lt;option&gt;Canada&lt;/option&gt;
                    &lt;/Input&gt;
                  &lt;/FormGroup&gt;
                &lt;/Col&gt;
              &lt;/Row&gt;
  
              &lt;Button&gt;Submit&lt;/Button&gt;
            &lt;/Form&gt;
          &lt;/Container&gt;
        &lt;/Media&gt;
      )
    }
  }
  </code></pre>
  
  <p>Here is how it shows up in the web page:
  <a href="https://i.stack.imgur.com/W9pUV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W9pUV.png" alt="enter image description here"></a></p>
  
  <p>I just want to know why it's not lining up on the left correctly and how to fix it. Thanks.</p>
  
  <p>Edit: as Just code has informed me, it is because in the style.css, I have this:</p>
  
  <pre><code>form div {
    margin: 1em;
  }
  </code></pre>