Header Blues

I noticed on a wide screen computer that my header background image is out of place. The logo overlaps with H1 Title. See my home page Here.

Here’s the code in my stylesheet that I used:

#masthead { width: 970px; height: 100px; background: url('images/logo1a.gif') no-repeat; /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ } 	

/* #masthead a { display: block; width: 970px; height: 100px; } */ /* uncomment this line if you use a graphic in the header - make sure the height of your header graphic is equal to the height declared in this line of code! */

When I uncomment line as indicated [this line: #masthead a { display: block; width: 970px; height: 100px; } ], H3 description is pushed out of place to area below nav tabs. My background image -Logo1a.gif is 970px x 100px as required.

I need the header background image to stay put regardless of screen size. Any recommendations would be greatly appreciated.