Issues with customized theme

Hi

If you test the virgin, un-customized version of Mesocolumn with the Google tool to show its mobile phone compatibility at https://www.google.com/webmasters/tools/mobile-friendly/, it passes the test with no issue.

I have customized my theme in a number of ways & one/some of these change makes it fail the test.

If I choose the Blog style => Magazine, which I have been forced to turn to, it passes the test, but fails if I use the style I was using before => Default.

Another issue is when I realized the site was too wide on wide screens & I wanted to reduce the maximum width of the site to 1200px. It reduced but then the site was no longer centered but floated to the left. The footer remains too wide.

I tried several ways to center the site, but all did not help.

I am using a child theme, with the child theme style file default/unchanged BUT this custom code in the Custom CSS block on the settings page:

#bodycontent {max-width: 1200px; margin: 0 auto;}
#post-entry {
background-color: #27282C;
}

#content {
background-color: #27282C !important;
}

#bbpress-forums {
	background: #2D2D2D;
	clear: both;
	margin-bottom: 20px;
	overflow: hidden;
	font-size: 12px;
}

#bbpress-forums div.even,
#bbpress-forums ul.even {
	background-color: #333;
}

#bbpress-forums div.odd,
#bbpress-forums ul.odd {
	background-color: #444;
}

ol.commentlist li {
background-color: #333; /* group comment background color */
}

#main-navigation .sf-menu a {
color: yellow; /* main nav font color */
}

#post-entry article.post-single h1.post-title {
font-size: 20pt; /* single-post title font-size */
}

.directory .content, body.buddypress .content {
background-color: #333;
}

.bbp-header {color: green; background-color: #F0C869;}

.sabai-directory-categories {font-size: 90%;}
.sabai-directory-categories a:link{font-size: 90% !important;}

#custom .content a { text-decoration: none !important;}

#custom a:active {
text-decoration: none;
}
#custom a:hover {
text-decoration: underline !important;
}

.content-inner a:hover {
text-decoration: underline !important;
}
.sabai-directory-listings-list .sabai-entity.sabai-directory-listing-featured {
  background-color: maroon;
  border-color:#ebe4c9;
}
#post-34198 {
background: #3d3d3d;
}
#post-34198 div.entry-content{
color: #F5DEB3;
margin-left: 10px; margin-right: 10px;
}
#post-34198 h2 a {
color: #F1BD5E !important;
margin-left: 10px; margin-right: 10px;
}

What

#1. is the correct way NOT to interfere with the default mobile phone compatibility but use my custom changes in the above code?

UPDATE: [Strangely, TODAY, it shows it is compatible, but I was forced to change it to Magazine style because up to yesterday, it was not passing the test. So quite confused – BUT if you see anything improper in the above code, please let me know]

#2. is the right way to keep the site centered & yet limit the maximum site width for example to 1200px? See current appearance: http://bit.ly/1GKLVfK

Worth mentioning:
Other customization include “do shortcode” code to enable adding some shortcodes in widget area as well as on a custom 404.php page & some code you gave me in another post to enable breadcrumbs (which for some reason has not worked) in the template files. I think that is all.

Thank you in advance