title: How could I align my label and textbox to the center? CSS
body: <p>I currently have the following form</p>
  
  <p><a href="https://i.stack.imgur.com/Bo3xk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bo3xk.png" alt="enter image description here"></a></p>
  
  <p>with the following CSS: </p>
  
  <pre><code>#myForm form {
    background-color: #E0E0E0;
    text-align: center;
  }
  #myForm label {
    display: inline-block;
    text-align: right;
    clear: left;
    width: 150px;
    text-align: right; 
  }
  #myForm input {
    display: inline-block;
    text-align: center;
  }
  #myForm select {
    display: inline-block;
    text-align: center;
  }
  </code></pre>
  
  <p>The html div sample: </p>
  
  <pre><code>&lt;div id = "myForm"&gt;
          &lt;form&gt;
              &lt;p&gt; &lt;label for="username"&gt;Username: &lt;/label&gt;
                  &lt;input type="text" id="username" name="username" size=20 /&gt;&lt;/p&gt;
              &lt;/p&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>How could I center my label and text boxes because it looks a bit off center. Additionally how could I make it so that the grey background is a box that is centered instead of taking the whole width of the screen.</p>