Heading Cut Off

[papillonstudios]

I have some text wrapping around images. With each set of text the there is a heading.

 

My problem is the first heading is being cut off a little bit at the top. here is the code:

 

HTML

<a href="http://localhost:8888/rbrwp/wp-content/uploads/2010/11/barmy.png"><img class="alignleft size-full wp-image-50" title="barmy" src="http://localhost:8888/rbrwp/wp-content/uploads/2010/11/barmy.png" alt="" width="193" height="192" /></a></p> 
<h2>THE BARMY! </h2> 
<p>The BARMY is Red Bar&#8217;s bonus content section for premium members only.</p> 
<p>The BARMY is a collection of bonus content from 2002 until present. The BARMY is designed to support the show, and keep Red Bar going on and on forever and ever. It also gives you access to some of the best content we&#8217;ve ever done! The BARMY includes:</p> 
<p>- AFTER-SHOWS<br /> 
- BONUS SHOWS<br /> 
- RED BAR MUSIC<br /> 
- PRANK CALLS<br /> 
- UNHEARD INTERVIEWS<br /> 
- VIDEOS<br /> 
- AND MUCH MORE!</p> 
<p>JOIN THE BARMY NOW FOR ONLY $10 A MONTH, $50 FOR 6 MONTHS, or $100 FOR 1 YEAR!</p> 

 

CSS

.storeContentScroll {
width:950px;
height:400px;
overflow:auto;
margin-left:auto;
margin-right:auto;
}

.storeContentScrollClear {
clear:none;
display:inline-block;
height:10px;
width:50px;
}

.storeContentScroll h2 {
font-family:Impact;
color:#FFF;
font-size:30px;
text-decoration:none;
font-weight:100;
width:100%;
margin:0;
margin-bottom:15px;
}

.storeContentScroll p {
margin-top:10px;
color:#999;
margin:0;
font-size:13px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:17px;
width:900px;
}

.storeContentScroll .storeItem {
display:inline-block;
width:900px;	
}

.storeContentScroll img {
margin:15px;	
float:left;
}

.storeContent .post-edit-link {
position:absolute;
left:0;
top:-50px;
background-image:url(images/edit.png);
width:44px;
height:21px;
}

.storeContent hr {
float:left;
width:900px;
margin-left:auto;
margin-right:auto;
margin-bottom:30px;
border:dashed 1px;
}