title: Each div lower than the previous one, no margin or padding issue
body: <p>Creating a custom WordPress theme with Bootstrap3.</p>
  
  <p>My divs are behaving ridiculous, as I probably missed something. I tried various solutions like display: inline, vertical-align: top, floats and clears, etc... But nothing worked.</p>
  
  <p>Here is my current look, and everything should be inline:</p>
  
  <p><a href="https://i.stack.imgur.com/JUuVk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JUuVk.png" alt="enter image description here"></a></p>
  
  <p>here is my current code:</p>
  
  <pre><code>    &lt;div class="container content"&gt;
                      &lt;!-- CONTENT --&gt;
                      &lt;div class="col-md-12 blog-posts"&gt;                    
                      &lt;article class="single-article col-md-4"&gt;
                      &lt;a href="myweb.com/blog/tempus-non-auctor/"&gt;
                      &lt;img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px"&gt;                    &lt;/a&gt;
                      &lt;h1 class="article-headline"&gt;&lt;a href="myweb.com/blog/tempus-non-auctor/"&gt;tempus non, auctor&lt;/a&gt;&lt;/h1&gt;
                      &lt;h4 class="article-time-stamp"&gt;&lt;i&gt;Posted on July 15th, 2016&lt;/i&gt;&lt;/h4&gt;
                      &lt;p&gt;&lt;/p&gt;&lt;p&gt;Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.&lt;br&gt;&lt;a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"&gt;&lt;i&gt;Read more&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;                    &lt;/article&gt;                                       
  &lt;/div&gt; &lt;!-- end blog posts part --&gt;
  &lt;!--END content wrapper --&gt;             
  &lt;/div&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>.single-article {
      padding-bottom: 10%;
  
      em {
          font-style: italic;
      }
  }
  
  .article-headline {
  
      padding-bottom: 2%;
  
      a {
          color: $purple-color;
      }
  }
  
  .article-time-stamp {
      font-size: 1em;
      padding-bottom: 1%;
  }
  </code></pre>
  
  <p>Any advices? Thanks</p>