title: How do I get this section with the form to center. The form field and button aren't centering
body: <p>I need the text to center in the middle of the section and the field and button to align under that text (with the field and button remaining side by side.) Everything is good - the field and button are currently beside each other the way it's supposed to be, but just it's all not centering properly. The text is centered but the form field and button are messed up. I have attached an image. I'm using HTML5, CSS3 and bootstrap.</p>
  
  <p><a href="https://i.stack.imgur.com/DWF8a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DWF8a.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;section class="more-products"&gt;
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;         
  &lt;div class=" col-lg-8 col-md-4 col-sm-4 prod-form"&gt;
  
  &lt;p class="par-headform"&gt; TEXT&lt;/p&gt;
  &lt;p class="para-form"&gt;
                    text about products
  &lt;/p&gt;
  &lt;p class="para-blue"&gt;
  
       Sign up for the newsletter Stay informed
  &lt;/p&gt;  
  
  &lt;form class="subscribe_group wow fadeInUp row col-m-12"&gt;
  &lt;div class=" col-md-6 col-sm-6 col-xs-5 "&gt;
  &lt;input class="form-control subscribe_mail" type="email" placeholder="email"&gt;
  &lt;/div&gt;
  &lt;div class="col-md-5 col-sm-6 col-xs-5 "   &gt;
  &lt;input class="btn-form" type="submit" value="Subscribe"&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.more-products {
  padding: 60px 0;
  background: #FCFCFC;
  text-align: center;
  }
  
  .more-products  .block {
  position: relative;
  z-index: 99;
  }
  
  .more-products .par-headform  .block {
  padding: 20px 15px;
  margin-top: 0;
  color: #666;
  }
  
  .prod-form .btn-form {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff;
  padding: 3% 14%;
  font-weight: 500;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  border: 1px solid #00bfff;
  background-color: #fff;
  letter-spacing: .8px;
  font-size: 120%; 
  display: inline-block; 
  }
  
  .prod-form .btn-form: Hover{
  color: #00bfff;
  padding: 3% 14%;
  font-weight: 500;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  border: 1px solid #00bfff;
  background-color: #fff;
  letter-spacing: .8px;
  font-size: 120%; 
  display: inline-block; 
  }
  
  .par-headform {
  font-size: 250%;
  line-height: 35px;
  }
  
  .form-control {
  max-width: auto;
  margin: 1px;
  }
  </code></pre>