Logo hidden under top menu

I have a logo that is 960px wide x 222px height. So I use the following custom css. If I make the css the same size, it cuts off the left and right side of the image. I need it to be full size and be flush with the menu border and bottom header border. I tried “Let logo and menu position adapt to browser window” in header behavior but that didn’t change anything.

Also, I would like to change the background behind the logo to white but keep the same blue color on the menu bar. See below… Thanks
Let logo and menu position adapt to browser window.

This partially works with width but not height or position between top and botom borders.

.logo img {
min-width:900px!important;
height:400!important;
}