title: CSS Responsive Form
body: <p>I am having issues trying to make this form responsive. Whenever I make my screen smaller, my form won't resize. I am using bootstrap, but I am not sure how to make that happen. I also don't know how to align "email" label with the other labels.</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
   &lt;/head&gt;
      &lt;style&gt;
  
      #myform {
          border: 1px outset #ccc;
          background: #fff repeat-x;
          padding: 50px;
          margin: 20px auto;
          width: 500px;
          height: 450px;
          font-size: 14px;
          -moz-border-radius: 4px;
      }
  
      #myform h3 {
          text-align: left;
          margin: 0 0 10px 0;
      }
  
  
      #inputs label,
      #inputs input,
      #inputs textarea,
      #inputs select {
          display: block;
          width: 300px;
          float: left;
          margin-bottom: 10px;
      }
  
      #inputs input {
          height: 40px;
      }
  
      #inputs label {
          text-align: right;
          width: 75px;
          padding-right: 20px;
      }
  
      #inputs br {
          clear: left;
      }
  
      #agree {
          font-size: 10.5px;
      }
  
     &lt;/style&gt;
  
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
      &lt;form id="myform" action="#"&gt;
  
          &lt;h3&gt;Your Information&lt;/h3&gt;
  
          &lt;div id="inputs"&gt;
  
              &lt;!-- username --&gt;
              &lt;label for="username"&gt;Firstname&lt;/label&gt;
              &lt;br/&gt;
              &lt;input id="username" type="text" placeholder="Fullname" /&gt;&lt;br /&gt;
  
              &lt;!-- password --&gt;
              &lt;label for="password"&gt;Password&lt;/label&gt;
              &lt;br/&gt;
              &lt;input id="password" type="password" placeholder="Password" /&gt;
              &lt;br /&gt;
  
              &lt;!-- email --&gt;
              &lt;label for="email"&gt;Email &lt;/label&gt;
              &lt;br/&gt;
              &lt;input id="email" type="text" placeholder="Email" /&gt;
  
          &lt;/div&gt;
          &lt;p&gt;
              &lt;button type="button" class="btn btn-primary btn-lg btn-block"&gt;
                  Proceed
              &lt;/button&gt;
  
          &lt;/p&gt;
          &lt;label id="agree"&gt;
              By registering you agree to Elephant's &lt;a href="#"&gt;Terms of Service&lt;/a&gt; and &lt;a href="#"&gt;Privacy Policy.&lt;/a&gt;
              &lt;input type="checkbox" id="check" title="Required to proceed" /&gt;
          &lt;/label&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>