Full-width logo: close empty space above & below, match menu bar width

Thank you in advance for your help. I am using Simple Catch (free) to develop a site at  http://www.pmcsconsulting.com/dev. I have inserted a 976 x 277 logo graphic in the header. How can I eliminate the empty (white) space above and below it? Also, I thought this graphic would be the same width as the menu bar below it, but the menu is slightly wider. Even when I upload a graphic wider than 976 (I tried 996 and changed the CSS below to say 996), the image's width is less than the menu's. Here is what I currently have in Custom CSS: #header { background: none #fff; } #header .layout-976 { position: relative; } #header .social-search { position: absolute; right: 0; top: 20px; } #header .social-search form.searchform { display: none; } #header #mainmenu ul li a {padding: 0 24px;} /* Remove the black border at the top of the page: */ #header .top-bg { background: none; border: none; }