Navigation bar gets smaller when changing widths of sidebar & content

Why does the background of my navigation bar get smaller when I change the width of my sidebar?

See https://www.childinjuryprevention.ca/

I changed the following classes/ids in my style.css in order to widen my sidebar (to 270px) and narrow my content area (to 640px):

.entry-content,
.entry-summary {
	clear: both;
	padding: 12px 0 0 0;
	width: 640px; /* added */
}

.commentlist {
	list-style: none;
	margin: 0;
	width: 640px; /* added */
}

#respond {
	border-top: 1px solid #e7e7e7;
	margin: 24px 0;
	overflow: hidden;
	position: relative;
	width: 640px; /* added */
}

#access,
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
	-webkit-text-size-adjust: 120%;
	width: 640px; /* added */
}

#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
	margin: 0 auto;
	width: 980px; /* changed */
}

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 0 0 16px;
	width: 980px; /* changed */
}
#content { /* changed - to move sidebar left */
	margin:0 20px 0 270px;
}
#primary,
#secondary { /* changed - to move sidebar left */
	float: left;
	overflow: hidden;
	width: 270px;
}

This causes my navigation bar background to be only 640px. (It appears that my actual navigation bar is 980px, but the background is 640px.) However, I want to make my navigation bar background to be 947px.

When I try to make #access have a larger width, the entire sidebar disappears.

Any help is appreciated! Thanks in advance.