Getting rid of top margin on h2 tag with class in twenty ten child

Hi I am having difficulty in getting rid of the top margin on a h2 tag I have targeted with a class. I am trying to use the firefox developers toolkit but I never seem to have much luck with it, when I hover over the h2 tag with the inspect element, it just says its the h2 tag.

This is the html for the h2 tag on my site:
https://www.broomeandthekimberley.com.au/2012/01/gig-guide/
<h2><span class="red">Thursday 31st May</span></h2>

The css in my twenty ten child theme is
.red {
color:#ff0000;
font: 18px “Helvetica Neue”, Helvetica, Arial, sans-serif;
padding:14px 0 0 0;
font-weight: 300;
margin: 0 0 5px 0;}

I tried putting #content h2 before it to make it more specific, but it made no difference.

Appreciate any suggestions. Thanks

[Moderator Note: Please post code or markup snippets between backticks or use the code button.]