Mobile menu conflicts

Hi,

im using the focus premium theme by site origin.

I noticed when I shrink the screen down to smaller size the menu bar begins to run off the left side of the page until it shrinks to the mobile view.

I also looked on https://responsinator.com and typed in the website to be able to see the compatibility on the android and iPhone 5 devices to see the menu messed up.

This is a issue because android and iphone 5 devices menu bars are running to the left because the screen resolution is desktop view on a mobile device.

the website is futureofthegame.tv

the code for the navigation section in the siteorigin theme is below.

#masthead .site-navigation {
	float: right;
}

#masthead .site-navigation .menu-wrapper {
	display: inline-block;

}

#masthead .site-navigation .menu-wrapper ul {
	font-size: 12px;
	list-style: none;
	margin: 0;
}

#masthead .site-navigation .menu-wrapper ul li {
	position: relative;

	display: inline-block;
	line-height: 1;
	margin-left: 25px;
}

#masthead .site-navigation .menu-wrapper ul ul li {
	display: block;
	margin-left: 0;
}

#masthead .site-navigation .menu-wrapper ul > li:first-child {
	margin-left: 0;
}

#masthead .site-navigation .menu-wrapper ul li a {
	color: inherit;
	display: block;
	font-weight: 500;
	padding: 18px 0;
	text-decoration: none;
}

#masthead .site-navigation .menu-wrapper ul ul li a {
	padding: 10px;
}

#masthead .site-navigation .menu-wrapper ul ul li:first-child a {
	padding-top: 15px;
}

#masthead .site-navigation .menu-wrapper ul ul li:last-child a {
	padding-bottom: 15px;
}

#masthead .site-navigation .menu-wrapper ul ul {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 180px;

	background: #333;
	display: none;
	margin: 0 0 0 -90px;
	z-index: 10;
}

#masthead .site-navigation .menu-wrapper ul ul ul {
	top: 0;
	left: 50%;

	margin-left: 0;
}

#masthead .site-navigation .menu-wrapper ul ul a {
	color: inherit;
	display: block;
	text-decoration: none;
}

#masthead .site-navigation .menu-wrapper ul ul li {
}

#masthead .site-navigation .menu-wrapper ul ul li:last-child {
	margin-bottom: 0;
}

#masthead .site-navigation .menu-wrapper ul li:hover > ul {
	display: block;

}