title: Bootstrap form input boxes not aligning
body: <p>I can't make the input boxes align in my bootstrap form.</p>
  
  <p>The input boxes for Name and Surname are aligned.
  The input boxes for Email, Mobile and Message are aligned.
  But the two groups are not aligned with each other. How can I achieve this?</p>
  
  <p>Also, the entire form appears to be padded a lot on the left but goes all the way to the end on the right side, how can I even this out?</p>
  
  <p>Below are my source codes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: white;
    padding-top: 80px;
    padding-bottom: 30px;
    background-size: cover;
  }
  
  .navbar {
    background: rgba(255, 255, 255, 0.7) !important;
    font-family: 'Raleway', sans-serif;
  }
  
  .navbar li a,
  .navbar .navbar-brand {
    letter-spacing: 3px;
  }
  
  .navbar-nav li a:hover,
  .navbar-nav li.active a {
    color: #8b0000 !important;
  }
  
  div#container {
    /* outermost box */
    font-family: 'Raleway', sans-serif;
    position: relative;
    width: 75% !important;
    margin: 0px auto;
    border: 0px;
    background: rgba(255, 255, 255, 0.85);
    padding: 10px;
    overflow: hidden;
    /* keeps form within container, but gets eaten up in smaller frame */
  }
  
  .control-label {
    color: black;
    font-size: 18px;
    text-align-last: right;
  }
  
  
  /*
      .form-group {
          background-color: black;
      }
      */
  
  #container img {
    padding-top: 40px;
    padding-bottom: 20px;
    border: 0px;
    max-width: 60%;
    height: auto;
  }
  
  h2 {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
  }
  
  
  /* or 1.9rem. em is relative to the font-size of its direct or nearest parent. rem is relative to the html (root) font-size. */
  
  p {
    font-size: 19px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  input[type=text],
  select {
    width: 99%;
    height: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 2px 1px;
    background: #ffffff;
  }
  
  input[type=email],
  select {
    width: 99%;
    height: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 2px 1px;
    background: #ffffff;
  }
  
  input[type=tel],
  select {
    width: 99%;
    height: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 3px;
    padding-right: 3px;
    margin: 2px 1px;
    background: #ffffff;
  }
  
  textarea {
    resize: vertical !important;
  }
  
  input[type=submit] {
    background-color: white;
    border: 1px solid black !important;
    color: black;
    font-size: 15px;
    width: 80px;
    height: 30px;
    padding: 5px;
    display: block;
    margin: 10px auto;
  }
  
  input[type=submit]:hover {
    background-color: white;
    border: 1px solid grey !important;
    color: cornflowerblue;
  }
  
  end {
    color: #555555;
    font-size: 16px;
    font-family: raleway;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;SITE&lt;/title&gt;
  
    &lt;link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;script src="https://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;body&gt;
  
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"&gt;
               &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
             &lt;/button&gt;
            &lt;a href="index.html" class="navbar-brand"&gt;SITE&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="bs-nav-demo"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
  
              &lt;li&gt;&lt;a href="" target="_blank"&gt;&lt;span class="glyphicon glyphicon-calendar" aria-hidden="true"&gt;&lt;/span&gt; Link one&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href=""&gt;&lt;span class="glyphicon glyphicon-user" aria-hidden="true"&gt;&lt;/span&gt; Link two&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div id="container"&gt;
  
        &lt;center&gt;&lt;img src=""&gt;&lt;/center&gt;
  
        &lt;div class="col-lg-12"&gt;
  
          &lt;h2&gt;Below there's a form that needs some work!&lt;/h2&gt;
  
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel eros et metus aliquet malesuada in et nunc. In lobortis, sem non mollis rutrum, quam dolor aliquet lacus, et tempus nibh sapien sit amet risus. Suspendisse vel lorem tortor. Praesent
            id ultricies libero, sed dictum purus. Maecenas eu metus et mi mollis accumsan in ut ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In efficitur arcu elit, quis tincidunt lectus varius ac.
            Integer ornare tellus sit amet nulla feugiat scelerisque. Phasellus pharetra erat in malesuada dictum. Maecenas non pulvinar tellus. Suspendisse fringilla nulla ut nunc mattis, condimentum interdum tortor imperdiet. Quisque consequat viverra
            justo sed porttitor.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;p&gt;&lt;/p&gt;
  
        &lt;h2&gt;Contact us!&lt;/h2&gt;
  
        &lt;form class="form-horizontal" name="enquiryform" method="post" action="form.php"&gt;
  
          &lt;div class="form-group-lg"&gt;
            &lt;label class="control-label col-xs-4" for="name"&gt;Name *&lt;/label&gt;
            &lt;div class="col-xs-8"&gt;
              &lt;input type="text" class="form-control" id="name" placeholder="First name" name="name" required&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group-lg"&gt;
            &lt;label class="control-label col-xs-4" for="surname"&gt;Surname&lt;/label&gt;
            &lt;div class="col-xs-8"&gt;
              &lt;input type="text" class="form-control" id="surname" placeholder="Last name" name="surname"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group-lg"&gt;
            &lt;label class="control-label col-xs-4" for="email"&gt;Email *&lt;/label&gt;
            &lt;div class="col-xs-8"&gt;
              &lt;input type="email" class="form-control" id="email" placeholder="you@example.com" name="email" required&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group-lg"&gt;
            &lt;label class="control-label col-xs-4" for="mobile"&gt;Mobile&lt;/label&gt;
            &lt;div class="col-xs-8"&gt;
              &lt;input type="tel" class="form-control" id="mobile" placeholder="Phone number" name="mobile"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group-lg"&gt;
            &lt;label class="control-label col-xs-4" for="message"&gt;Message *&lt;/label&gt;
            &lt;div class="col-xs-8"&gt;
              &lt;textarea class="form-control col-xs-8" id="message" rows="6" name="message" placeholder="Do you want to find/become a tutor? Suburb? Date/time?..." required&gt;&lt;/textarea&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;input type="submit" class="btn btn-default" value="Submit"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
  
        &lt;center&gt;
          &lt;end&gt;Company Pty Ltd&lt;/end&gt;
        &lt;/center&gt;
  
      &lt;/div&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>