Header image issue at screens 480px and below

Hi everyone,

Like some others here, I’m having trouble getting the header to work responsively at smaller screen sizes. It is a large logo – 501×90 px. Below that width, the logo runs off screen. I should note that this is my first website, too, but I can usually follow direction well!

My goal is too have it centered and resized to fit mobile screens. I’ve figured out the centering, but not the responsiveness.

I’ve tried the suggestions I could find in these forums, and throughout the web, but no luck.

First, I just added the following code mentioned here at the 480 media queries section:

.header-image .site-title a {
    		background-size: contain !important;
	}

Then I tried uploading a smaller logo size and adding the following…

I added some new css for the specific header image size in the media queries too, again without any luck.

.header-image #title-area {
  background: url(image/logo-320-below.png) no-repeat;
  height: 57px;
  width: 320px;
}

I also tried the following:

@media only screen and (max-width: 480px) {
.header-image .site-title a {
	float: none;
	background: url(image/logo-320-below.png) no-repeat center top;
	position: relative;
	margin: 0 auto;
	min-height: 57px;
	width: 100%
}
}

With the above code, I only added in each css rule one at a time after the background url, but none of those combination seemed to work.

Should I be adding an additional rule in functions similar to what was added to specify the size of the large screen logo?

I’ve looked into quite a few tutorials that don’t seem to work on html5 themes, so I’m not sure what else to do here.

As you can tell, I’ve basically been experimenting – which has been a great way to learn a good bit of css and php while creating this website, but in the header area, I am simply at a loss.

I’d be so grateful to anyone who can point this complete newbie in the right direction!

I’ll go ahead and open up the site – it’s at a wpengine address, and won’t be redirected to the .org until tomorrow (if I can finally figure out the logo!)
http://savetheozarks.wpengine.com/