How to adjust the width of header images

Hi all,

Website – http://drinks.satimis.com

I just increased the page width adding follow on style.css

@import url("../twentyeleven/style.css");
#page { max-width: 1200px;
}

But the width of the header images is NOT stretched/increased automatically

style.css of child theme

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http://drinks.satimis.com/
Description:    Child theme for the Twenty Eleven theme
Template:       twentyeleven
Version:        0.1.0
*/
@import url("../twentyeleven/style.css");
#site-description {
    color: yellow;
	font-size: 14px;
    font-weight:bold;
	margin: 0 270px 3.65625em 0;
}
.entry-title,
.entry-title a {
    color: #222;
	text-decoration: none;
}
.entry-title a:hover {
    color: darkgreen; }
.entry-title a:focus {color: red}
.entry-title a:active {
    color: #1982d1;
}
#branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
	position: relative;
	z-index: 9999;
	background: #309971;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
	background: #d4e2c3
}
pre {
    background: #b6cfea;
	font: 13px "Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}
#site-title a:active {
    color: #5a90ed;
}
.singular .entry-header,
.singular .entry-content,
.singular .footer.entry-meta,
.singular #comments-title {
	width: 94.3396%;
	/* 94.3396% of 848px is 800px  */
}
#site-title a {
color: red;
}
@import url("../twentyeleven/style.css");
#page { max-width: 1200px;
}
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: none;
}

Please advise how to fix this problem. Thanks

Rgds
satimis