Centering Vantage on Mobile Phones

We are using Vantage Pro.
When viewing any page on a mobile device (iPhone 6+ specifically), pages are not showing up centered on the mobile device screen. Pages show up with the page far right edge centered on the screen (Portrait view); i.e. half of the right most part of the page shows on the left side of the screen (dead center), while the other half of the screen is the background color- if you “flick” the page to the left, it will completely be off of the screen, at which point we have a very large area of our background color only. When flicking the page to the far right, the pages bounce to normal/correct position. How can we correct this, as it is especially annoying, and it cause WordPress popup plug-ins to appear lop sided. The same pretty much holds true for landscape view. Any help is appreciated (added/modified CSS is below).
/* Vantage set Circle Icon Widget Icon color */
.widget_circleicon-widget .circle-icon-box .circle-icon [class^=”icon-“] {
color: #28af55;
font-size: 14px !important;
}
/* Vantage set menu font family and weight */
.main-navigation a {
font-family:”Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-size: 16px;
}
/* Circle Icon Heading Color */
.widget_circleicon-widget .circle-icon-box h4 {
color: #3b3b3b !important;
font-size: 22px !important;
}
/* Circle Icon Text Color */
.widget_circleicon-widget .circle-icon-box p.text {
color: #5e5e5e !important;
font-size: 16px !important;
}
/* Circle Icon More Link */
.widget_circleicon-widget .circle-icon-box a.more-button {
color: #28af55 !important;
font-size: 20px !important;
}
.widget_circleicon-widget .circle-icon-box a.more-button:hover {
color: #28af55 !important;
font-size: 22px !important;
}
/* Vantage Site Title Color */
header#masthead .hgroup h1 {
color: #000000 !important;
}
/* Header Padding */
header#masthead .hgroup {
padding-bottom: 1px !important;
padding-top: 1px !important;
}
#main {
padding: 10px !important;

URL: http://expresstvrepair.com