my site shows white space on right in mobile chrome but not desktop chrome

Question

site in progress: http://www.scissormanmusic.com

This is the first site I've made since learning Javascript/Jquery so please be nice to me. I used Bootstrap, Javascript & Jquery to add responsiveness to my site & it works great on FF24 & Chrome30! But when I view this site in portrait mode in the mobile version of Chrome on my Galaxy S3 there's this white space on the right I can't seem to find the cause of. In landscape mode the white space isn't there & the site looks & behaves like it should.

I'm using the following meta tags I thought would keep this problem from happening:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

Quite confused as to why it displays differently between the mobile & desktop versions of Chrome! And only in portrait mode!

I'd like to also note that because I've used Javascript/JQuery to make my site responsive, I did not add any @media queries.

Any help would be greatly appreciated. Thank you!

Answer 1

Set the css below for head and body.

html, body {
    overflow-x:hidden;
}

Answer 2

The <table> tag in your contact form has a width attribute of 450. This is too big given the left margin.

The maximum width for that table should be 415px however you should probably work out a nicer way to achieve that layout using CSS.