title: Checkbox and label not properly aligning in different code the same is working separately
body: <p>I have just started learning html and css3. trying to create a login page but when I am trying to add once check box its not inline with label. When I run the same code only for check box its inline. not able to understand what is the exact issue. </p>
  
  <p>HTML Code is </p>
  
  <pre><code>&lt;div class="checkbox1"&gt;
                  &lt;input type="checkbox" id="cb"&gt;
                  &lt;label for="cb"&gt;Stay signed in&lt;/label&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code is </p>
  
  <pre><code>#wrapper #subwrapper .checkbox1{
      display: inline-block;         
      float: left; 
      font-size: 20px;
      color: #ffffff;
  }
  </code></pre>
  
  <p>When I include the same in my complete html code and css code the check box and label are not perfect. </p>
  
  <p>Complete HTML code is.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;title&gt;Dchamps-Signin&lt;/title&gt;
      &lt;style&gt; 
          body {
              background-image: url("bg_signin.jpg"); 
              background-repeat: no-repeat;
          }       
      &lt;/style&gt;
      &lt;link rel="stylesheet" type="text/css" href="signin.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
              &lt;div class="header"&gt;
  
              &lt;div&gt;
      &lt;/header&gt;
  
      &lt;div id="wrapper"&gt;  
          &lt;div class="logo"&gt;
              &lt;img src="Logo_FF.gif"&gt;
          &lt;/div&gt;
          &lt;div class="heading"&gt;
              Sign in to your account         
          &lt;/div&gt;
          &lt;div id="subwrapper"&gt;
  
              &lt;div class="un"&gt;
                  Username
              &lt;/div&gt;
  
              &lt;input type="text" size="60"&gt;
  
              &lt;div class="pw"&gt;
                  Password
              &lt;/div&gt;
  
              &lt;input type="text" size="60"&gt;
  
              &lt;div class="signin"&gt;
              &lt;button class="button"&gt;Sign in&lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div class="checkbox1"&gt;
                  &lt;input type="checkbox" id="cb"&gt;
                  &lt;label for="cb"&gt;Stay signed in&lt;/label&gt;                  
              &lt;/div&gt;
  
              &lt;div class="needhelp"&gt;
                   Need Help?
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;div class="footer"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Help&lt;/li&gt;
                      &lt;li&gt;Terms&lt;/li&gt;
                      &lt;li&gt;CompanyInfo&lt;/li&gt;                           
                  &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and My complete CSS Code</p>
  
  <pre><code>.header {
  width: 100%;
  height: 50px;
  margin-bottom: 25;
  }
  #wrapper{
   width: 800px;
   margin: 0 auto;
  float: center;
  text -align: center;
  }
  #wrapper .logo{
  margin-top: 25px;
  text-align: center;
  }
  #wrapper .heading{
  padding-top: 20px;
  font-size: 45px;
  color: #e94324;
  text-align: center;
  }
  #wrapper #subwrapper {
  width: 400px;
  margin: 0 auto;
  }
  #wrapper #subwrapper .un {
  padding-top: 15px;
  color: #f6ec28;
  font-size: 25px;
  float: left;
  padding-left: 5px;
  }
  #wrapper #subwrapper .pw {
  padding-top: 15px;
  color: #f6ec28;
  font-size: 25px;
  float: left;
  padding-left: 5px;
  }
  #wrapper #subwrapper input{
   padding-top: 5px;
  background-color: transparent;
  height: 50px;
  }
  #wrapper #subwrapper .signin{
  padding-top: 15px;
  color: #f6ec28;
  font-size: 25px;
  }
  #wrapper #subwrapper .button{
  background-color: #f26534;
  height: 65px;
  width: 380px;
  font-size: 35px;
  /*-moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;*/
  color: #ffffff;
  top: 55%;
  }
  #wrapper #subwrapper form {
  }
  #wrapper #subwrapper .checkbox1{
      display: inline-block;         
      float: left; 
      font-size: 20px;
      color: #ffffff;
      position: relative;
  }
  #wrapper #subwrapper .needhelp{
  float: right;
  color: #f6ec28;
  padding-bottom: 80px;
  }
  .footer{
  height: 20px;
  clear: both;
  border-top: 1px solid #254A73;
  }
  .footer ul li{
  float: right;
  display:inline-block;
  margin-right: 20px;
  color: #ffffff;
  }
  </code></pre>
  
  <p>I am not sure why the check box is not in line. </p>
  
  <p>Regards,
  KJ</p>