title: Trying to align content in a div on a center
body: <p>This should be trivial, but given the granularity with which I am styling my markup, I am unable to get the content in the center</p>
  
  <p>Markup is essentially: </p>
  
  <pre><code>&lt;div class = "rectangle" id = "login"&gt;
      &lt;form&gt;
       &lt;!-- bunch of labels and corresponding input fields --&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The stylesheet is essentially:</p>
  
  <pre><code>.rectangle{ border:1px solid #ccc; width:500px; padding: 10px;}
  #login{margin:auto;}
  #login form {margin:auto;}
  </code></pre>
  
  <p>This unfortunately does not center align the contents my form. They are closer to the left of the containing parent element (div class rectangle). What am I doing wrong here? </p>