Different page templates behaving differently in mobile devices- Twenty Eleven

In my child theme I have a home page using 3 sidebars. I have used the sidebar-page.php template for this page. I have added an extra sidebar in the sidebar.php page (registered in functions.php) The home page looks great in mobile devices (full page showing). For my secondary pages I want only a left sidebar. I have created a page template ‘sidebar-page-1.php that call sidebar-1.php. Sidebar-1.php contains only one sidebar. In the CSS I have created #primary-2, #content-2, and #secondary-2 to style the secondary pages. The problem is that while all pages look great on a computer screen, the secondary pages are larger in mobile devices, running off to the right side of the screen.
Any help is so appreciated!

The site is mendocinowoodlands.org/mwca.

My CSS for the 2 sets of page structure:
(I have nothing added or mofified to media queries at this point)

#page {
margin: 0 auto;
	width: 1000px;

}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
	background-color:#F0e0c1;
	background-image:url(https://mendocinowoodlands.org/mwca/wp-content/uploads/content-back.jpg);
	background-repeat:repeat-y;
}
#content {
	font-family:'Giovanni-Book';
	font-weight:normal;
	font-style:normal;
	font-size:15px;
	line-height:20px;
	margin: 0 22.7% 0 15%;
	width: 62.25%;

}
#extra-sidebar {
	float: right;
	margin:0;
	padding:30px 15px;
	width: 19.8%;
	}
#secondary {
	position:relative;
    float: left;
    width: 13.5%;
    margin:0 0 0 -73.6%;
	padding:40px 0 0 15px;
	background-color:#bfbe9f;
	background-image:url(https://mendocinowoodlands.org/mwca/wp-content/uploads/sidebar-img.jpg);
	background-repeat:no-repeat;
}

#primary-2 {
float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
	background-color:#F0e0c1;
	background-image:url(https://mendocinowoodlands.org/mwca/wp-content/uploads/content-back.jpg);
	background-repeat:repeat-y;
}

#content-2 {
	font-family:'Giovanni-Book';
	font-weight:normal;
	font-style:normal;
	font-size:15px;
	line-height:20px;
	margin: 0 22.7% 0 15%;
	width: 62.25%;

}

#secondary-2 {
	position:relative;
    float: left;
    width: 13.5%;
    margin:0 0 0 -73.6%;
	padding:40px 0 0 15px;
	background-color:#bfbe9f;
	background-image:url(https://mendocinowoodlands.org/mwca/wp-content/uploads/sidebar-img.jpg);
	background-repeat:no-repeat;
}