title: How to reduce div size in CSS using twitter bootstrap?
body: <p>I asked the same question before, but i made code changes from the past. I still have the same problem of adjusting the div size.</p>
  
  <p>I am trying to design a login page, the screenshot is below.</p>
  
  <p><a href="http://prntscr.com/2pksiq" rel="nofollow">http://prntscr.com/2pksiq</a> (latest)</p>
  
  <p>Where as i want the output as <a href="http://prntscr.com/2pga73" rel="nofollow">http://prntscr.com/2pga73</a> . I am trying to reduce the size of the tags </p>
  
  <p><code>&lt;div id="logo" class="logo col-xs-2"&gt;&lt;/div&gt;</code></p>
  
  <p><code>&lt;div id="title" class="page-title green-bg col-xs-8"&gt;Local Adventures&lt;/div&gt;</code></p>
  
  <p>I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.</p>
  
  <p>I have the below HTML:</p>
  
  <pre><code>&lt;head&gt;
  
      &lt;link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet"&gt;
      &lt;link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/styles.css"rel='stylesheet' type='text/css' href='styles.css' /&gt;
      &lt;link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet"&gt;
  
      &lt;meta charset="utf-8"&gt;
  
      &lt;/head&gt;
  
      &lt;title&gt;Local-Adventures&lt;/title&gt;
  
          &lt;div class="visible-xs stop-detail"&gt;    
              &lt;div id="login-form"&gt;
              &lt;div class="logo col-xs-4"&gt;&lt;/div&gt;
              &lt;div class="page-title green-bg col-xs-8"&gt;Local Adventures&lt;/div&gt;
  
              &lt;a href="#"&gt;Create an Account&lt;/a&gt;
              &lt;a href="#"&gt;Sign In&lt;/a&gt;
                &lt;input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' "&gt;
                &lt;input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "&gt;
                &lt;input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' "&gt;
  
          &lt;br&gt;&lt;br&gt;
          &lt;span class='btn btn-lg btn-success btn-block'&gt;Create An Account&lt;/span&gt;
          &lt;span class='btn btn-lg btn-primary btn-block'&gt;Facebook Login&lt;/span&gt;
  
      &lt;/div&gt; &lt;!-- end login-form --&gt;
  
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is below:</p>
  
  <pre><code>   @charset "utf-8";
  /* CSS Document */
  
  /* ---------- GENERAL ---------- */
  /*
  body {
      background: #FFFFFF;
      color: #999;
      font: 100%/1.5em sans-serif;
      margin: 0;
  }
  */
  
  
  a {
      color: #2a2a2a;
      text-decoration: none;
      margin:1px 33;
  }
  
  a:hover { color: #88c425; }
  
  fieldset {
      border: none;
      margin: 0;
  }
  .btn-success {
   border-radius:0px;
   background-color: #88c425
  }
  
  .btn-success:hover {
  background-color: #88c425
  }
  
  .btn-primary {
   border-radius:0px;
  }
  
  input {
      border: none;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      -webkit-appearance: none;
  }
  
  input:focus {
    outline: none;
  }
  
  input[type="submit"] { cursor: pointer; }
  
  .clearfix { *zoom: 1; }
  .clearfix:before, .clearfix:after {
      content: "";
      display: table; 
  }
  .clearfix:after { clear: both; }
  
  /* ---------- LOGIN-FORM ---------- */
  
  #login-form {
      margin: 50px auto;
      width: 300px;
  }
  
  #login-form h3 {
      background-color: #79a002;
      border-radius: 5px 5px 0 0;
      color: #fff;
      font-size: 14px;
      padding: 20px;
      text-align: center;
      text-transform: uppercase;
  }
  
  #login-form fieldset {
      background: #fff;
      border-radius: 0 0 -1px -1px;
      padding: 0px;
  
  }
  
  #login-form fieldset:before {
      background-color: #fff;
      content: "";
      height: 8px;
      left: 50%;
      margin: -4px 0 0 -4px;
      position: absolute;
      top: 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      width: 8px;
  }
  
  #login-form input {
      font-size: 14px;
  }
  
  #login-form input[type="email"], #login-form input[type="password"] {
      border:none; /* clear previous borders */
      border-bottom: 1px solid #88c425; /* add bottom border */
      padding: 12px 10px;
      width: 300px;
  }
  
  #login-form input[type="email"] {
      border-radius: 3px 3px 0 0;
  }
  
  #login-form input[type="password"] {
      border-top: none;
      border-radius: 0px 0px 3px 3px;
  }
  
  #login-form input[type="submit"] {
      background: #1dabb8;
      border-radius: 3px;
      color: #fff;
      float: right;
      font-weight: bold;
      margin-top: 20px;
      padding: 12px 20px;
  }
  </code></pre>