title: Rows and columns not aligning properly
body: <p>I am using bootstrap and there are different rows containing 2 columns each.
  The problem is that they are not aligning properly.
  This is what I want
  <a href="https://i.stack.imgur.com/OoIiB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OoIiB.jpg" alt="enter image description here"></a></p>
  
  <p>and this is what I am getting
  <a href="https://i.stack.imgur.com/FpI3B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FpI3B.jpg" alt="enter image description here"></a></p>
  
  <p>Please tell me what's wrong here.
  I have been trying this for more than an hour and somehow it's not working.</p>
  
  <p>Here's the css for this</p>
  
  <pre><code>    .container {
    text-align: center;
    width: 80%;
  }
  
  .first {
    background: rgb(0, 30, 58);
    color: white;
  }
  
  .span1,
  .span2 {
    font-size: 36px;
    font-weight: bold;
  }
  
  .span1 {
    color: rgb(72, 174, 137);
  }
  
  [type="text"] {
    border-radius: 25px;
    padding-left: 5px;
  }
  
  [type="submit"] {
    color: white;
    background-color: rgb(72, 174, 137);
    border-radius: 25px;
    position: relative;
    margin-left: -25px;
  }
  
  .use {
    height: 85%;
    margin: 0 auto;
  }
  
  .box {
    border: 3px solid rgb(72, 174, 137);
    width: 55%;
    margin: 0 auto;
    max-height: 210px;
  }
  
  .para {
    text-align: left;
    margin-right: 0;
    padding-right: 0;
    padding-top: 15px;
  }
  
  .para strong {
    font-weight: 900;
    font-size: 16px;
  }
  
  .second {
    margin-bottom: 30px;
    border: 1px solid green;
    width: 10%;
  }
  
  .threebox {
    width: 90%;
    margin: 0 auto;
    padding-left: 70px;
  }
  
  .col-lg-4 {
    height: 40%;
  }
  
  .col-lg-4 &gt; p {
    background-color: white;
    border: 2px solid white;
    border-top-color: green;
    width: 200px;
    height: 160px;
    box-shadow: 10px 10px 15px;
  }
  
  .positions {
    margin-top: 60px;
    position: relative;
    margin-bottom: -50px;
    z-index: 2;
  }
  
  .positions &gt; h1 {
    font-size: 30px;
    font-weight: bold;
  }
  
  .spanf {
    font-size: 18px;
    font-weight: bold;
  }
  
  .features {
    text-align: center;
    padding-bottom: 40px;
    width: 100%;
    margin: 0 auto;
    background-color: rgb(242, 243, 245);
    height: 1500px;
    z-index: 1;
    padding-top: 120px;
    margin-bottom: 0;
  }
  
  .features .row {
  
    width: 65%;
    margin: 0 auto;
  }
  
  .features .row p {
    text-align: left;
    padding-left: 20px;
  }
  
  .features button {
    border-radius: 20px;
  }
  
  .features .row {
    margin-top: 40px;
  }
  
  .features img {
  /*   width: 98%; */
  /*   height: 98%; */
    left: 12px;
  top: -12px;
  box-shadow: -2px 2px 9px;
  }
  
  .features .row .col-lg-6 {
  /*   padding-right: 15px; */
  /*   padding-left: 2px; */
  }
  
  .imgright {
    position: relative;
    border: 3px solid rgb(72, 174, 137);
    top: 5%;
    width: 40%;
    padding-bottom: 0px;
    padding-right: 2px;
    padding-left: 0;
    margin-left: 20px;
    margin-top: 20px;
  }
  
  .img2 {
    position: relative;
  
  /*   padding-bottom: 10px; */
  }
  
  .imgleft {
    position: relative;
    border: 3px solid rgb(72, 174, 137);
    width: 40%;
    top: 5%;
    margin-left: 10px;
    margin-top: 20px;
    padding: 0;
  }
  
  .img3 {
    position: relative;
    left:30px;
  /*  top:-20px; */
  /*   padding-bottom: 10px; */
  
  }
  
  .pillars {
    background-color: rgb(72, 174, 137);
    height: 350px;
    top: 0;
  }
  </code></pre>
  
  <p>Here's the link to the codepen for this - <a href="http://codepen.io/silentarrowz/pen/KgpQbG" rel="nofollow noreferrer">codepen</a>
  I have updated the image to show the error properly.
  each row has the image and row on different sides
  and thus the rows are not aligning properly as shown in the image.</p>