title: Line Up Bootstrap Featurette Text With The Image Above it
body: <p><BR>
  My question is this: I have one Bootstrap Featurette below another. Both have an image and both have both a header and a paragraph (As you can see <a href="http://jawa-jawaeyes.c9.io" rel="nofollow">here</a>). My problem is that the text on the lower Featurette does not line up horizontally with the image on the higher featurette, and I cannot seem to fix it or find instructions on how to fix it, so I came here for some help.</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;Example Shop&lt;/title&gt;
      &lt;link rel="icon" type="image/png" href="images/media-shuffle.png" /&gt;
      &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt; 
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt; &lt;!-- FontAwesome Integration --&gt;
      &lt;link rel="stylesheet" href="bootstrap/css/animate.min.css" type="text/css"&gt;
      &lt;script src="https://cdn.ampproject.org/v0.js" async&gt;&lt;/script&gt;
      &lt;style&gt;body {opacity: 0}&lt;/style&gt;&lt;noscript&gt;&lt;style&gt;body {opacity: 1}&lt;/style&gt;&lt;/noscript&gt;
    &lt;/head&gt;
      &lt;style type="text/css"&gt;
        @font-face {
          font-family: 'msemibold';
          font-style: normal;
          font-weight: normal;
          src: url('fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
        }
        @font-face {
            font-family: 'mpro';
            font-style: normal;
            font-weight: normal;
            src: url('fonts/MYRIADPRO-REGULAR.woff') format('woff');
        }
        @font-face {
          font-family: 'bebas';
          src: url('fonts/bebas/BebasNeueRegular.otf');
        }
  
        @font-face {
          font-family: 'bebasbold';
          src: url('fonts/bebas/BebasNeueBold.otf');
        }
  
        @font-face {
          font-family: 'sspro';
          src: url('fonts/source-sans-pro/SourceSansPro-Regular.otf');
        }
  
        @font-face {
          font-family: 'ssprobold';
          src: url('fonts/source-sans-pro/SourceSansPro-Bold.otf') format('opentype'), url('fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
        }
  
        .jumbotron {
          background-image: url('images/background.png');
          margin-top: 0;
          font-family: 'bebasbold';
          color: black;
          margin-bottom: 5%;
        }
  
        .firstheader {
          text-align: left;
        }
  
        a {
          text-decoration: none;
          color: #585c65;
        }
  
        a:hover {
          text-decoration: none;
          color: black;
        }
  
        body {
          background-image: url('images/dark-background.png');
        }
  
        .textbody {
          color: white;
          font-family: arial;
          padding-left: 1%;
        }
  
        .gamer {
          color: white;
          font-family: 'bebasbold';
          border-color: #585c65;
        }
  
        .stream {
          color: white;
          font-family: 'bebasbold';
        }
  
        .featurette-divider {
          border-color: #585c65;
          margin: 80px;
        }
  
        .lead {
          font-family: 'mpro';
        }
  
        @media (min-width: 992px) {
          .container-fluid {
            overflow-x: hidden;
            white-space: nowrap;
            font-family: 'bebasbold';
          }
        }
      &lt;/style&gt;
  
        &lt;body&gt;
          &lt;div class="jumbotron container-fluid navbar-fixed-top"&gt;
            &lt;div class="container"&gt;
              &lt;h1 class="firstheader"&gt;The Digital Card Shop &lt;small&gt;. &lt;a href="#"&gt;About Us&lt;/a&gt; | . &lt;a href="#"&gt;Contact Us&lt;/a&gt; | . &lt;a href="#"&gt;Sell Your Account&lt;/a&gt;&lt;/small&gt;&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
  
          &lt;div class="container-fluid"&gt;
            &lt;container class="gamer"&gt;
              &lt;div class="row featurette"&gt;
                &lt;div class="col-sm-7 col-sm-push-6"&gt;
                  &lt;h2 class="featurette-heading"&gt;Star Wars Card Trader &lt;span class="text-muted"&gt;We Buy &amp; Sell Cards.&lt;/span&gt;&lt;/h2&gt;
                  &lt;p class="lead"&gt;Star Wars is awesome. For that reason, &lt;br&gt; it remains one of the most popular subjects for trading cards;&lt;br&gt; Both physically and digitally.
                &lt;/div&gt;
                &lt;div class="col-md-5 col-md-pull-7"&gt;
                  &lt;img class="featurette-image img-responsive center-block" src="images/swct.jpeg" height="200px" width="200px" alt="Generic placeholder image"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/container&gt;
  
            &lt;hr class="featurette-divider"&gt;
  
            &lt;div class="container-fluid"&gt;
            &lt;container class="gamer"&gt;
              &lt;div class="row featurette"&gt;
                &lt;div class="col-sm-7 col-sm-push-2"&gt;
                  &lt;h2 class="featurette-heading"&gt;Topps KICK 16 &lt;span class="text-muted"&gt;We Buy &amp; Sell Cards.&lt;/span&gt;&lt;/h2&gt;
                  &lt;p1 class="lead"&gt;Football (It isn't called soccer) is awesome. For that reason, &lt;br&gt; It remains one of the most popular subjects for trading cards;&lt;br&gt; Both physically and digitally. (Please add Derby County cards Topps)
                &lt;/div&gt;
                &lt;div class="col-md-5 col-md-pull-1"&gt;
                  &lt;img class="featurette-image img-responsive center-block" src="images/kick.png" height="200px" width="200px" alt="Generic placeholder image"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;
            &lt;/container&gt;
  
  
  
  
  
        &lt;/body&gt;
          &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
          &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>