Heading Troubles in CSS

Hi guys,

I am new to this thing but think it is amazing. Simple question I think.

I am trying to create a new heading to not mess with the rest of the formatting of the site.

I have made these changes in the CSS, and they will be visible in the browser, then disappear when I change something else random like list margins.

In typography css I have added the h7 info in these two places. And then a similar add in the layout css. What the is happening!?!?

#primary .singlepage h1,
#primary .singlepage h2,
#primary .singlepage h3,
#primary .singlepage h4,
#primary .singlepage h5,
#primary .singlepage h6,
#primary .singlepage h7{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:lighter;
letter-spacing: 0px;
text-align: left;
text-transform: none;
}

#primary .singlepage h1{font-size:2.1em;line-height:1.2em;}
#primary .singlepage h2{font-size:1.7em;line-height:1.2em;}
#primary .singlepage h3{font-size:1.4em;line-height:1.2em;}
#primary .singlepage h4{font-size:1.2em;line-height:1.2em;}
#primary .singlepage h5{font-size:1em;line-height:1.2em;}
#primary .singlepage h6{font-size:0.9em;line-height:1.2em;}
#primary .singlepage h7{font-size:1.8em;line-height:1.2em;color:#054b81;}