How to get header image logo to line up with navbar?

My header image logo lines up perfectly with the left side of the navbar on 15″ and smaller screens, but on larger screens where there is more room on the sides, the logo goes past the left side of the navbar.

I added the image with custom css:

#header
{background: url("logo.png") no-repeat top 30px left 6%}

I also moved the site title and description to the right to accommodate the logo using padding-left 138px. Again, everything works perfectly except the logo not aligning with the navbar when viewing on larger screens. Any help would be appreciated. Thanks.