title: Bootstrap form spacing is off
body: <p>I am using bootstrap form elements and I want to center all the form elements in the middle. I've tried adding margin: 0 auto !important to the form-control class, but there are still issues with padding/margins. The input fields still have uneven left and right padding/margins. Plus, the text area and button are stuck to the left. Keeping responsive design in mind, what is the best way to approach this problem?</p>
  
  <p><a href="https://i.stack.imgur.com/HDrqB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HDrqB.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;form class="form"&gt;
          &lt;h4 class="form-contactme"&gt;Contact Me&lt;/h4&gt;
          &lt;div class="form-row"&gt;
             &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="firstName" class="form-inputlabel"&gt;First Name&lt;/label&gt;
                &lt;input type="text" class="form-control" id="firstName" placeholder="First Name"&gt;
             &lt;/div&gt;
             &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="lastName" class="form-inputlabel"&gt;Last Name&lt;/label&gt;
                &lt;input type="text" class="form-control" id="lastName" placeholder="Last Name"&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row"&gt;
             &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="email" class="form-inputlabel"&gt;Email&lt;/label&gt;
                &lt;input type="email" class="form-control" id="email" placeholder="you@example.com"&gt;
             &lt;/div&gt;
             &lt;div class="form-group col-sm-6"&gt;
                &lt;label for="phone" class="form-inputlabel"&gt;Phone&lt;/label&gt;
                &lt;input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx"&gt;
             &lt;/div&gt;
          &lt;div class="form-row"&gt;
             &lt;div class="form-group"&gt;
                &lt;label for="messageBox"&gt;Send me a message &lt;i class="far fa-smile-beam"&gt;&lt;/i&gt;&lt;/label&gt;
                &lt;textarea type="text" class="form-control" id="messageBox"&gt;&lt;/textarea&gt;
             &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row"&gt;
                &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Scss:</p>
  
  <pre><code>.form{
  padding:3% !important;
  background-color:#9fd199;
  margin-bottom:5%;
  &amp;-contactme{
      font-size:1.8rem;
      font-weight:900;
      text-align:center;
      margin-bottom:15%;
  }
  &amp;-row{
      width:100%;
  }
  &amp;-inputlabel{
      display:none;
  }
  &amp;-control{
      margin-left:0 auto !important;
  }
  </code></pre>
  
  <p>}</p>