css is messing up my content column…

Hello: I have a site where we are putting on a lot of custom stuff and also CSS. we have loaded in a custom font and also on an iphone we want the banner picture to be as wide as the phone screen exactly.

here is the css that does those two things:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#branding img {
width:125%;
margin-bottom: 0px;
margin-left: 0%;
}
}

@font-face { /* declare fonts */
	font-family: "title_font";
	src: url("https://superwayne.com/wp-content/themes/twentyeleven-child/343.eot") format("embedded-opentype");
	src: url("https://superwayne.com/wp-content/themes/twentyeleven-child/343.ttf") format("truetype");
		}

/* styling to put custom font on post titles */
.entry-title a {font-family: title_font;}
.entry-title {font-weight: normal;}
.singular .entry-title {font-family: title_font; font-weight: normal; font-size: 26px;}

the site is superwayne.com; and what is happening is that this code also causes the content column to be “scrunched” to the left somewhat (it does not go as far to the right as it should). This is just on the iphone. Now I know this has to do with the code that makes the banner extra wide but that alone does not cause it. That combined with the custom font is doing it. So what I would like to do is to be able to make the content column its normal width again but sill have the css above do what is is intended to do…

I have tried a few things changing “width” and also margins on “#primary” and also “.entry-content” but those have no effect…

Anyone have any ideas?

Thanks, Gerard