Styling an h1 tag but it keeps friggin wrapping!

I have an h1 tag and i have it styled like I want it to look.

Except for one thing... When the text in the H1 tag is too long it wraps around to a new line. (And that's fine that's what I want it to do.)

But the text that wraps under it bunches up and overlaps the text above it. How do you stop that?

Here's my code

#mainquestion h1 {
color:#000000;
font-size:3.0em;
font-weight:bold;
letter-spacing:-.1em;
}

<div id="mainquestion">
			<h1><strong>The Main Question Text Is A Little Long But Sometimes I Need It To Be.</strong></h1>
</div>
</div>

Code (markup):

 

OK I set up a link to a live example here. http://www.nicecomeback.com/test/

That's the exact same CSS file I'm working with.

It looks like it's not my code I pasted above that's causing it. But some other element in the CSS. Because when I created the style.css with JUST the mainquestion element defined it worked fine with no overlap.

 

Try adding a line-height to the style

 

I don't understand your problem exactly, when you say "bunches up and overlaps the text above it", I think it could be due to your letter-spacing, why is it a negative number?

Also is H1 the only thing inside the mainquestion DIV, if so then there's no need for this DIV.
Also is there any real reason for having strong tags inside the H1, as you already have font-weight: bold; set?

 

Yeah line-height is probably it, if John McCain was a Muslim what's the problem George?

 

nevermind got it.

It was the body: verdana, arial, geneva, sans-serif;

 

John McCain is not a Muslim.

It's just as ridiculous as the people claiming Barack is a Muslim.

That's the point...

 

OK sorry