Off Canvas Menu creeping into main page

Hi guys, I am hoping to add some padding to my primary navigation, but when I do, the Off Canvas Menu creeps out from the side of the page. Any ideas? Is there a way to provide a bit of padding by targeting the primary navigation and not having this effect?

Many, many thanks!

Notes:
-I removed the CSS for now, so you won't see the effect.
-I know that can set the inner width to "contained", but it pulls it too far in...I only need like 50-60 px on each side.
-This is the CSS that was causing the issue:

@media (min-width: 769px) {
.main-navigation {
padding-left: 80px;
padding-right: 80px;
}
}