I am trying to design a login page, the screenshot is below.

<http://prntscr.com/2pksiq>

Where as i want the output as <http://prntscr.com/2pga73> . I am trying to reduce the size of the tags 

`<div id="logo" class="logo col-xs-2"></div>`

`<div id="title" class="page-title green-bg col-xs-8">Local Adventures</div>`

I am new to CSS, please suggest me a way to fix this. I am using twitter bootstrap in my project.

I have the below HTML:

```
<div class="visible-xs stop-detail">    

<head>

    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="C:/L.A project/local-adventure/web/src/main/webapp/resources/components/bootstrap/js/bootstrap.min.js"></script>
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/createaccount.css" rel="stylesheet">
    <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' />
    <link href="C:/L.A project/local-adventure/web/src/main/webapp/resources/localadventures/css/main.css" rel="stylesheet">

    </head>

    <meta charset="utf-8">

    <title>Local-Adventures</title>

            <div id="login-form">
            <div class="logo col-xs-4"></div>
            <div class="page-title green-bg col-xs-8">Local Adventures</div>

            <a href="#">Create an Account</a>
            <a href="#">Sign In</a>
              <input type="email" required value="Email Address" onBlur="if(this.value=='')this.value='Email Address'" onFocus="if(this.value=='Email Address')this.value='' ">
              <input type="email" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' ">
              <input type="email" required value="Confirm password" onBlur="if(this.value=='')this.value='Confirm password'" onFocus="if(this.value=='Confirm password')this.value='' ">

        <br><br>
        <span class='btn btn-lg btn-success btn-block'>Create An Account</span>
        <span class='btn btn-lg btn-primary btn-block'>Facebook Login</span>

    </div> <!-- end login-form -->

    </div>

```

My CSS is below:

```
   @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;
}

```