Правильное создание разделов статьи

Question

Я создаю столбец статьи с разделом для каждой статьи. Мне интересно, как я быстро добавляю пространство между разделами, на данный момент, если текст для секции длинный, он может перекрывать мой тег hr и перейти к следующему разделу. Эта проблема видна только если я посмотрю на нее на мобильном телефоне.

http://codepen.io/anon/pen/MyWoPX

я опубликовал в лазурных для лучшего обзора http://testingwebground.azurewebsites.net/ если уменьшить ширину как можно меньше, он показывает изображение ниже

http://snag.gy/17mpD.jpg

<section> 
     <div class="row"> 
     <div class="row-sm-height"> 
      <aside class="col-sm-6"> 
      <a> 
      <img src="http://bandwagonbible.com/Stories/NFLBeginnersGuide/Image1.JPG" /> 
      </a> 
      </aside> 
      <aside class="col-sm-6"> 
      <div> 
       <span> <a id="Article_Category">Football</a></span> 
       <h2 id="Article_Header2"> 
           Beginners Guide to Bandwagoning: The 4 Things You Need To Know About How the NFL Works 
          </h2> 
       <span id="Article_Date">November 12, 2015</span>     
      </div> 
      </aside> 
     </div> 
     </div> 
     <hr> 
</section> 

Answer 1

Проблема находится в вашем определение высоты на # Article_Header2

#Article_Header2 { 
    height: 48px; 
    font: normal normal normal normal 16px/normal 'Roboto Condensed', sans-serif; 
    margin: 0px; 
} 

Если вы хотите сохранить минимальную высоту 48 пикселей, то, возможно, вместо этого используйте min-height. Как это:

#Article_Header2 { 
    min-height: 48px; 
    font: normal normal normal normal 16px/normal 'Roboto Condensed', sans-serif; 
    margin: 0px; 
} 

То, что я обычно делаю, когда добавление пробелов между элементами, как ваша, это добавить Верхнее поле ко всем элементам (в вашем случае статей), и удалите запас из : первого ребенка.