title: Bootstrap colums algining veritcaly not horizontaly
body: <p>I am currently working on a some columns that include images as thumbnails. I can not work out why the columns are not aligning horizontally like I would like them to be.</p>
  
  <p>Here is the piece of html I'm referring to:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &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;title&gt;Townsville Rentals&lt;/title&gt;
          &lt;!-- Bootstrap Css --&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link href="Index.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="header"&gt;
                  &lt;img class="logo" src="images/logo.png" alt="logo"&gt;
                  &lt;ul class="nav pull-right"&gt;
                      &lt;li class="nav-text"&gt;HOME&lt;/li&gt;
                      &lt;li class="nav-text"&gt;ABOUT&lt;/li&gt;
                      &lt;li class="nav-text"&gt;PROPERTY OWNERS&lt;/li&gt;
                      &lt;li class="nav-text"&gt;TENATS&lt;/li&gt;
                      &lt;li class="nav-text"&gt;CONTACT US&lt;/li&gt;
                      &lt;li class="nav-number"&gt;1300 702 305&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="top-content"&gt;
                  &lt;img class="arrows" src="images/arrows.png" alt="arrows"&gt;
                  &lt;img class="slider" src="images/slider.png" alt="slider"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper"&gt;
              &lt;h3 class="thumbnail-title"&gt; OUR GUARANTEE TO YOU &lt;/h3&gt;
              &lt;div class="row"&gt;
                  &lt;div class=".col-md-2"&gt;&lt;img src="images/extra.png" alt="extra"&gt;&lt;/div&gt;
                  &lt;div class=".col-md-4"&gt;&lt;img src="images/fees.png" alt="fees"&gt;&lt;/div&gt;
                  &lt;div class=".col-md-4"&gt;&lt;img src="images/four.png" alt="four"&gt;&lt;/div&gt;
                  &lt;div class=".col-md-4"&gt;&lt;img src="images/realistic.png" alt="real"&gt;&lt;/div&gt;
                  &lt;div class=".col-md-4"&gt;&lt;img src="images/regular.png" alt="reg"&gt;&lt;/div&gt;
                  &lt;div class=".col-md-4"&gt;&lt;img src="images/relax.png" alt="relax"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the associated CSS:</p>
  
  <pre><code>html,body
  {
      margin-left: auto;
      margin-right: auto;
      width: 1370px;
  }
  .wrapper
  {
      margin-left: auto;
      margin-right: auto;
      width: 100%;
  }
  .header
  {
      margin: auto;
      max-width: 1370px;
  }
  .logo
  {
      padding-left: 50px;
      padding-top: 30px;
  }
  .nav
  {
  }
  .nav-text
  {
      display: inline-block;
      float: left;
      font-family: "GothamSSm Meduim";
      font-size: 12px;
      font-style: bold;
      list-style-type: none;
      max-height: 100%;
      max-width: 100%;
      overflow: hidden;
      padding-right: 70px;
      top: 45px;
  }
  .nav-number
  {
      color: #45aa4a;
      display: inline;
      float: right;
      font-family: "GothamSSm Meduim";
      list-style-type: none;
      max-height: 100%;
      max-width: 100%;
      overflow: hidden;
      padding-right: 65px;
      top: 45px;
  }
  .arrows
  {
      padding-left: 575px;
      padding-right: 685px;
      padding-top: 45px;
  }
  .slider
  {
      margin-left: auto;
      margin-right: auto;
      max-height: 100%;
      max-width: 100%;
      padding-top: 60px;
  }
  .thumbnail-title
  {
      margin-left: auto;
      margin-right: auto;
      padding-top: 250px;
      text-align: center;
  }
  .thumbnail
  {
      border: 2px solid red;
      display: inline;
  }
  </code></pre>