title: react bootsrap element not centering
body: <p>I have a "div" that was centered horizontally, then updated to use react bootstrap "
  form".</p>
  
  <p>Now the elements on the "form" are not centered, appearing to the left...</p>
  
  <p><a href="https://i.stack.imgur.com/9zqFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9zqFg.png" alt="enter image description here"></a></p>
  
  <pre><code>render() {
      return (
          &lt;div className="App"&gt;
              &lt;div className="App-title"&gt;
                  Countdown to {this.state.deadline}
              &lt;/div&gt;
              &lt;Clock
                  deadline={this.state.deadline}
              /&gt;
              &lt;Form inline&gt;
                  &lt;FormControl 
                      className="Deadline-input"
                      placeholder='new date' 
                      onChange={event =&gt; this.setState({newDeadline: event.target.value})}
                  /&gt;
                  &lt;Button onClick={() =&gt; this.changeDeadline()}&gt;
                      Submit
                  &lt;/Button&gt;
              &lt;/Form&gt;
  
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>All is under className App</p>
  
  <pre><code>.App {
  text-align: center;
  font-size: 35px;
  margin-top: 20%;
  }
  
  .App-title {
  font-size: 50px;
  }
  
  .Clock-days,
  .Clock-hours,
  .Clock-minutes,
  .Clock-seconds {
  display: inline;
  margin: 10px;
  }
  
  .Deadline-input {
  font-size: 25px;
  margin: 5px;
  }
  </code></pre>
  
  <p>Why it is not centered anymore? how to align my form on the center?
  :]</p>