Uneven padding on row elements in Bootstrap - html

Question

I have a grid layout consisting of 4 rows in Twitter Bootstrap.
I would like each row to be even in height, with equal padding between the content of each row.
However the padding on the rows are currently unequal.
For example the space at the foot of the li items in 'Technologies' and the hr line is significantly narrower than the space at the foot of 'Education'.
I cannot see in my CSS where I am going wrong, but how can I apply equal padding throughout? Thanks in advance
Here is the link to my website where the issue is.
<div class="container">
<div id="greeting">
<p>
My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
</p>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Technologies</h2>
</div>
<div class="col-md-4">
<h2 class="tech-header">Comfortable</h2>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Bootstrap</li>
<li> Adobe PhotoShop</li>
</ul>
</div>
<div class="col-md-4">
<h2 class="tech-header">Finding my feet</h2>
<ul>
<li> JavaScript</li>
<li> JQuery</li>
<li> PHP</li>
<li> SQL</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Experience</h2>
</div>
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-4">
<h2 class="sideheader">Education</h2>
</div>
<div class="col-md-8">
<h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
<ul>
<li> BA(Hons) Social Science (2:1)</li>
</ul>
</div>
</div>
<div class="hr"><hr></div>
<div class="row">
<div class="col-md-12" id="button">
View my full CV
</div>
</div>

Answer 1

Here is your specific code :
HTML :
<div class="col-md-8">
<h2>Reader Offer Administrator / Account Manager</h2>
<br> <----- REMOVE THIS
<h3>Thompson & Morgan - March 2007 to August 2015</h3>
<p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
</div>
Css:
#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
top: -60px; <----- REMOVE THIS
position: relative;
}
If you remove the <br/> and the top:60px; every thing returns to the normal.