title: How do I horizontally align two columns in Bootstrap?
body: <p>This is the HTML code for my BootStrap website:
      </p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="../../favicon.ico"&gt;
  
      &lt;title&gt;Yanni Pang&lt;/title&gt;&lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"&gt;&lt;!-- Custom styles for this template --&gt;
      &lt;link href="/css/main.css" rel="stylesheet" type="text/css"&gt;&lt;!-- Animate CSS --&gt;
      &lt;link href="/css/animate.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="css/minimalpace.css" type="text/css"&gt;
      &lt;script src="plugins/pace.min.js" type="text/javascript"&gt;
  &lt;/script&gt;
      &lt;link href="css/minimalpace.css" rel="stylesheet" type="text/css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css"&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;
  &lt;/script&gt;&lt;!-- Latest compiled and minified JavaScript --&gt;
  
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"&gt;
  &lt;/script&gt;&lt;!-- Just for debugging purposes. Don't actually copy these 2 lines! --&gt;
      &lt;!--[if lt IE 9]&gt;&lt;script src="../../assets/js/ie8-responsive-file-warning.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
      &lt;script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript"&gt;
  &lt;/script&gt;&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;!-- Analytics --&gt;
  
      &lt;script type="text/javascript"&gt;
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
       ga('create', 'UA-17399906-5', 'auto');
       ga('send', 'pageview');
      &lt;/script&gt;&lt;!-- End --&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav class="navbar navbar-inverse animated fadeIn"&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="#navbar" aria-expanded="false" aria-controls="navbar"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;/button&gt; &lt;a class="navbar-brand animated slideInLeft" href="/index.html"&gt;Yanni Pang&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="navbar-collapse collapse" id="navbar"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="disabled"&gt;&lt;a href="/photos"&gt;Photos&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="/articles"&gt;Articles&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="/contact"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;test2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- &lt;ul class="nav nav-pills pull-right"&gt;
                      &lt;li class="navbarpills"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="disabled"&gt;&lt;a href="/photos"&gt;Photos&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="/articles"&gt;Articles&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li&gt;&lt;a href="#"&gt;test2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt; --&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="jumbotron jumbotronothercolor animated fadeIn"&gt;
              &lt;h1&gt;Welcome to my website!&lt;/h1&gt;
  
              &lt;p class="lead"&gt;On this site, I will post random stuff!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="row marketing"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;h4&gt;Education&lt;/h4&gt;
  
                  &lt;p&gt;I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-6"&gt;
                  &lt;h4&gt;Missions Trips&lt;/h4&gt;&lt;!-- &lt;ul class="missionslist"&gt; --&gt;
  
                  &lt;ul class="missionslist"&gt;
                      &lt;li style="list-style: none; display: inline"&gt;
                          &lt;h5&gt;Grace Chapel&lt;/h5&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;Trinidad 2014&lt;/li&gt;
  
                      &lt;li&gt;&lt;a class="animated bounceIn" href="/navajonation"&gt;Navajo Nation 2015&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-6"&gt;
                  &lt;h4&gt;Sports&lt;/h4&gt;
  
                  &lt;p&gt;I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:&lt;/p&gt;&lt;br&gt;
  
                  &lt;p&gt;50 Free: 26.75&lt;/p&gt;
  
                  &lt;p&gt;100 Breast: 1:17.93&lt;/p&gt;
  
                  &lt;p&gt;100 Free: 1:01:01&lt;/p&gt;
  
                  &lt;p&gt;Breath Holding Personal Best: 1:30:57&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-6"&gt;
                  &lt;h4&gt;Hobbies&lt;/h4&gt;
  
                  &lt;p&gt;Swimming&lt;/p&gt;
  
                  &lt;p&gt;Coding&lt;/p&gt;
  
                  &lt;p&gt;Making&lt;/p&gt;
  
                  &lt;p&gt;Photography&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 tempspace"&gt;
                      &lt;h4&gt;Coding Experience&lt;/h4&gt;
  
                      &lt;p&gt;HTML&lt;/p&gt;
  
                      &lt;p&gt;CSS&lt;/p&gt;
  
                      &lt;p&gt;Some Java&lt;/p&gt;
  
                      &lt;p&gt;Some AppleScript&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-lg-6"&gt;
                      &lt;h4&gt;Photography Gear&lt;/h4&gt;
  
                      &lt;p&gt;Canon EOS Rebel t6s&lt;/p&gt;
  
                      &lt;p&gt;Video Ball Mount Tripod&lt;/p&gt;
  
                      &lt;p&gt;Canon EF-S 18-135 Lens with Lens Hood&lt;/p&gt;
  
                      &lt;p&gt;Canon EF 50mm STM&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12 social animated fadeIn"&gt;
                      &lt;a href="http://github.com/yannip1234"&gt;&lt;span class="fa-stack fa-lg"&gt; &lt;/span&gt;&lt;/a&gt; &lt;a href="http://youtube.com/yannip1234"&gt;&lt;span class="fa-stack fa-lg"&gt; &lt;/span&gt;&lt;/a&gt; &lt;a href="http://twitter.com/yannip1234"&gt;&lt;span class="fa-stack fa-lg"&gt; &lt;/span&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;footer class="footer"&gt;
                  &lt;p&gt;&amp;copy; Yanni Pang 2014&lt;/p&gt;&lt;img src="http://iplogger.org/1sF94.jpg"&gt;
              &lt;/footer&gt;
          &lt;/div&gt;&lt;!-- /container --&gt;
          &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
          &lt;script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript"&gt;
  &lt;/script&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/* Space out content a bit */
  body {
      background-color: #fff;
      color: #000;
  }
  .jumbotronothercolor {
      background: rgba(120,  163,rgba(210, 210, 210, 1)92, 0.79);
  }
  : : selection {
      background: #74ff7d;
  }
  
  /* Everything but the jumbotron gets side spacing for mobile first views */
  .header,.marketing,.footer,.singlepage {
      padding-right: 15px;
      padding-left: 15px;
  }
  /* MoreSpace for text */
  .morespace {
      padding-left: 80px;
  }
  .lessspace {
      padding-left: 149px;
  }
  /* Nav Pills */
  .nav-pills&gt;li&gt;a {
      color: #76a25b;
  }
  /* End Nav Pills */
  /* Text Centered */
  .col-lg-12 &gt; a {
      text-decoration: none;
  }
  .col-lg-12 {
      text-align: center;
  }
  .col-lg-12 a:hover {
      text-decoration: none;
      color: #ff9a00;
      transition: .5s;
  }
  .col-lg-12 a {
      text-decoration: none;
      color: #76a25b;
      transition: .5s;
  }
  /* Main Body Links */
  .col-lg-6 a {
      text-decoration: none;
      color: #76a25b;
      transition: .5s;
  }
  
  .col-lg-6 a:hover {
      text-decoration: none;
      color: #ff9a00;
  }
  .col-lg-6 {
      text-align: center;
  }
  /* Main Body Links End */
  /* Custom page header */
  .header {
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
  }
  
  /* Make the masthead heading the same height as the navigation */
  .header h3 {
      margin-top: 0;
      margin-bottom: 0;
      line-height: 40px;
  }
  
  
  /* Custom page footer */
  .footer {
      padding-top: 19px;
      color: #777;
      border-top: 1px solid #e5e5e5;
      text-align: center;
  }
  
  /* Customize container */
  @media (min-width:  768px) {
      .container {
          max-width: 730px;
      }
  }
  
  .container-narrow &gt; hr {
      margin: 30px 0;
  }
  
  /* Main marketing message and sign up button */
  .jumbotron {
      text-align: center;
      border-bottom: 1px solid #e5e5e5;
      color: #000;
  }
  
  /* Supporting marketing content */
  .marketing {
      margin: 40px 0;
  }
  
  .marketing p + h4 {
      margin-top: 28px;
  }
  
  /* Responsive:  Portrait tablets and up */
  @media screen and (min-width:  768px) {
      /* Remove the padding we set earlier */
      .header,.marketing,.footer {
          padding-right: 0;
          padding-left: 0;
      }
  
      /* Space out the masthead */
      .header {
          margin-bottom: 30px;
      }
  
      /* Remove the bottom border on the jumbotron for visual effect */
      .jumbotron {
          border-bottom: 0;
      }
  }
  .tempspace {
      margin-top: 50px;
  }
  
  .missionslist {
      list-style-type: disc;
      list-style-position: inside;
      margin: 0;
      padding: 0;
  }
  .missionslist h4 {
      margin: 0;
      padding: 0;
  }
  /*Navbar*/
  .navbar {
      border-radius: 0; 
  }
  .navbar-brand {
      font-size: 180%;
  }
  .navbar-inverse .navbar-nav &gt; li &gt; a {
      color: #74ff7d;
  }
  .navbar-inverse .navbar-nav &gt; li &gt; a:hover, .navbar-default .navbar-nav &gt; li &gt; a:focus {
      color: #ff9a00;
  }
  .navbar-inverse .navbar-brand {
      color: white;
  }
  .navbar-toggle {
    border: none;
    background: transparent !important;
  }
  .navbar-toggle:hover {
    background: transparent !important;
  }
  .navbar-toggle .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .navbar-toggle .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .navbar-toggle .middle-bar {
    opacity: 0;
  }
  .navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
  .navbar-toggle.collapsed .top-bar {
    transform: rotate(0);
  }
  .navbar-toggle.collapsed .middle-bar {
    opacity: 1;
  }
  .navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
  }
  /*End*/
  /*NavajoNation*/
  .singlepage {
      border-bottom: 1px solid #e5e5e5;
      text-align: center;
  }
  
  .navajonation {
      font-family: Helvetica;
      font-size: 1.2em;
      text-align: auto;
      line-height: 2em;
  }
  
  .navajonationdonate {
      padding-top: 20px;
  }
  
  .navajocenter {
      text-align: center;
  }
  
  /*NavajoNation End*/
  
  /*Col Center*/
  .row-centered {
      text-align: center;
  }
  
  .col-centered {
      display: inline-block;
      float: none;
  /* reset the text-align */
      text-align: left;
  /* inline-block space fix */
      margin-right: -4px;
  }
  
  /*Col Center End*/
  .tab {
      margin-left: 40px;
  }
  
  /* Classes */
  .pull-left {
      float: left!important;
  }
  
  .pull-right {
      float: right!important;
  }
  
  // Usage as mixins
  .element {
  }
  
  .another-element {
  }
  .watermark {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
      z-index: 1100;
  }
  </code></pre>
  
  <p>This is how it appears:</p>
  
  <p><a href="http://i.stack.imgur.com/tlOhU.png" rel="nofollow">Website</a></p>
  
  <p>How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!</p>