Most of the excess space is caused by this CSS rule:
#FollowMeBubble{
width:331px !important;
position:absolute !important;
left: 38% !important;
top:200px !important;
z-index:10000 !important;
border-bottom:none !important;
}Not sure why this rule is even needed because there's an inline style which sets the visibility of #FollowMeBubble to hidden. However, to play it safe, if you just remove the left property from the above rule, that will eliminate most of the excess space without affecting the functionality of the tab.
The rest of the excess space comes from the footer menu. For some reason, there's inline styling which sets various properties of wp_footer_menu DIV, including setting the padding-left to 250px. Not only that, the properties are set using the !important clause. Two big no-no's when it comes to web design is using inline styles and unnecessary use of the !important clause, because it makes it very difficult, and sometimes impossible, to override using CSS. Anyway, it's the padding-left of 250px which is pushing the menu out to the right, causing the excess space on the right. You can see the footer menu looking kind of squashed to the right on a phone.
So, what I would do is take the inline style out and move it into the stylesheet, removing the !important clauses. However, instead of carrying over the padding-left, I would set the margin-left & margin-right of the unordered list (and take the inline style out of the unordered list) to auto so the menu stays in the center:
#wp_footer_menu {
border: 1px solid #9db5cc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #909090;
/* padding-left: 250px; removed */
padding-bottom: 25px;
padding-top: 25px;
}
#wp_footer_menu ul {
margin-left: auto;
margin-right: auto;
display: table;
}For those of you who are having problems with the mobile menu, it looks like there's a solution in this thread, but make sure you create a child theme first.