title: centering div not working
body: <p>I am trying to center the text and form field inputs in the #registration-code-entry .registration-code-entry-content div</p>
  
  <p>Not sure what I am doing wrong.</p>
  
  <p><a href="http://jsfiddle.net/yLX4F/" rel="nofollow noreferrer">http://jsfiddle.net/yLX4F/</a></p>
  
  <p><img src="https://i.stack.imgur.com/GSl8E.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div id="registration-code-entry"&gt;
      &lt;div class="registration-code-entry-header"&gt;&lt;/div&gt;
  
      &lt;div class="registration-code-entry-middle"&gt;
          &lt;div class="registration-code-entry-content"&gt;
              &lt;form class="registration-form"&gt;
  
                  &lt;div class="field"&gt;
                      &lt;input type="text" name="first_name" placeholder="*First Name" class="required" /&gt;
                  &lt;/div&gt;
                  &lt;div class="field"&gt;
                      &lt;input type="text" name="last_name" placeholder="*Last Name" class="required" /&gt;
                  &lt;/div&gt;
                  &lt;div class="field"&gt;
                      &lt;input type="email" name="email" placeholder="*Email Address" class="required" /&gt;
                  &lt;/div&gt;
                  &lt;div class="field"&gt;
                      &lt;input type="text" name="phone" placeholder="Phone Number" /&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;input type="checkbox" name="optin"&gt;
                      &lt;label for="optin" /&gt;Yes, I would like to receive more information&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div class="field"&gt;
                      &lt;input type="checkbox" name="accept" class="required" /&gt;
                      &lt;label for="accept"&gt;*I accept the &lt;a href="#" class="view-official-rules"&gt;Official Rules&lt;/a&gt;.&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;input type="submit" class="submit-btn" value=""&gt;
              &lt;/form&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="registration-code-entry-footer"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#registration-code-entry {
      height: 100px;
      width: 359px;
      position: absolute;
      top: 100px;
      right: 20px;
      background: transparent;
  
      .registration-code-entry-header {
          top: 0;
          background: transparent url('../images/form-header.png') no-repeat;
          width: 359px;
          height: 17px;
      }
  
      .registration-code-entry-middle {
          background: #713487;
  
          .registration-code-entry-content {
              border: 1px solid red;
              width: 350px;
              margin: 0 auto;
              color: #fff;
  
              form {
  
                  display: inline-block;
                  margin: 0 auto;
  
                  .field {
                      margin: 10px 0;
  
                      input[type="email"], input[type="text"] {
                          padding: 5px;
                      }
                  }
  
                  input.submit-btn {
                      background: transparent url('../images/submit-btn.png') no-repeat;
                      width: 168px;
                      height: 59px;
                      display: block;
                      border: 0;
                  }
              }
          }
      }
  
      .registration-code-entry-footer {
          display: block;
          bottom: 0;
          background: transparent url('../images/form-footer.png') no-repeat;
          width: 359px;
          height: 11px;
      }
  }
  </code></pre>