There's nothing actually wrong with what you did. It's just that when your viewport goes lower than 862px, the header text drops to the line below.
Change min-width from 500px to 862px and your problem is solved.
Thanks Nancy, I stared at the problem so long I failed to noitice the width was too small. Now I can't get the text to remain centered in the header as the window width changes. Is there a margin/padding combo in the .header_text tag that will work? I haven't found it yet.
font: 12px Tahoma, Geneva, sans-serif;
font-family:Georgia, "Times New Roman", Times, serif;
margin:0 auto; /**width width, this is centered on screen**/
Remove duplicate .header_text styles from your CSS. They aren't helping you.
Thanks again, Nancy. I see how the text-align and width work together with the margin to center it all.