Menu out of view on mobile screen

Hi, for some reason my menu is suddenly out of view in mobile view. It is positioned too much right.
It has worked fine before and no additional css has been altered.

Below is my Additional css
/* Enter Your Custom CSS Here */
.site-branding {
margin-left:36px;
}

.hero-image .site-header {
background: rgba(73, 42, 41, 0.5);
}

.main-navigation li {
margin-right: 22px;
}

.main-navigation ul ul a {
background: rgba(73, 42, 41, 0.9);
}

}
.site-footer {
background-color:#800000;
}

a:hover {
text-decoration: underline;
}

a {
color: black;
}
button,
input[type=”button”],
input[type=”reset”],
input[type=”submit”] {
padding: 0px 0px;
background:transparent;
border: 0;
color: #fff;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
-webkit-appearance: button;
}

input[type=”search”],
textarea {
position: relative;
padding: 2px;
width: 50%;
background: #f1f0f0;
border: 1px solid #d2cfcf;
color: #242424;
-webkit-appearance: none;
}
.main-navigation {
width: 830px;
margin-top: 24px;
margin-right: 16px;
margin-bottom: 24px;
}

The page I need help with: [log in to see the link]