title: How to I center my submit button in CSS?
body: <p>I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given: </p>
  
  <p>create a label element selector to float to the left with block
     display set text alignment to right assign width of 8em set an
     appropriate amount of padding configure and input element and
     textarea element selectors with block display of 12em bottom margin</p>
  
  <p>Here is the code I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form{
   float:left;
   display:block;
   text-align:right;
   width:8em;
  }
  input {
    display: block;
    margin-bottom:1em;
  }
  textarea#feedback {
    display: block;
    margin-bottom:1em;
  }
  .form{
  margin-left: 12em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="form"&gt;
  &lt;div class="form"&gt;
  &lt;form&gt;
   &lt;label for="Name"&gt;Name*&lt;/label&gt;
    &lt;input type="form" name="Name" id="" value="" required&gt;&lt;br&gt;
    &lt;label for="Email"&gt;Email*&lt;/label&gt;
    &lt;input type="email" name="email" id= value"" required&gt; &lt;br&gt;
    &lt;label for="Experience"&gt;Experience*&lt;/label&gt;
    &lt;textarea rows="2" cols="20"&gt;
    &lt;/textarea&gt;&lt;br&gt;
    &lt;input type="submit" value="Apply Now"&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/uflw7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uflw7.jpg" alt="enter image description here"></a>I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.   </p>