title: How can I center 2 input text close to each other?
body: <p>So i want my sign up and back button (both are input type: submit) to be at the center. The problem is it's not working even if i used margin: auto. Please take note I already set width for this input. </p>
  
  <p><a href="https://i.stack.imgur.com/EtgF3.png" rel="nofollow noreferrer">enter image description here</a></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>* {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-size: 14px;
    background-image: url("StockSnap_FS24L3X9BH.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  
  .container {
    width: 50%;
    margin: 10px auto;
    display: block;
  }
  
  .row {
    width: 80%;
    margin: 10px auto;
    padding: 20px;
  }
  
  input:not([type=submit]):not([name=age]) {
    width: 50%;
    clear: left;
  }
  
  label {
    display: inline-block;
    width: 150px;
    float: left;
    text-align: left;
  }
  
  input[type=submit] {
    width: 100px;
    margin: 0 auto;
  }
  
  input[name=age] {
    width: 60px;
  }
  
  #gender {
    width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
       include_once("code2_registration.php");
      ?&gt;
  
    &lt;div class="container"&gt;
      &lt;h1 style="text-align: center"&gt; Membership Forum &lt;/h1&gt;
      &lt;div class="row"&gt;
        &lt;form action="register.php" method="POST"&gt;
  
          &lt;p&gt; Please fill the following form to complete the registration. &lt;/p&gt; &lt;br/&gt;
          &lt;label&gt;Username:&lt;/label&gt; &lt;input type="text" name="username" /&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;Password:&lt;/label&gt; &lt;input type="password" name="password" /&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;First Name:&lt;/label&gt; &lt;input type="text" name="firstName" /&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;Last Name:&lt;/label&gt; &lt;input type="text" name="lastName"&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;Email Address:&lt;/label&gt; &lt;input type="text" name="email"&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;Sex: &lt;/label&gt;&lt;select name="gender" id="gender"&gt;
          &lt;option value="male"&gt; Male &lt;/option&gt;
          &lt;option value="female"&gt; Female &lt;/option&gt;
          &lt;option value="others"&gt; Others &lt;/option&gt;
          &lt;option value="others"&gt; Prefer not to say &lt;/option&gt;
         &lt;/select&gt; &lt;br/&gt;&lt;br/&gt;
          &lt;label&gt;Age:&lt;/label&gt; &lt;input type="number" name="age"&gt; &lt;br/&gt;&lt;br/&gt;
  
          &lt;input type="submit" name="submit" value="Sign Up" id="submit"&gt;
          &lt;input type="submit" name="back" value="Back" id="back"&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>