div position won't reset in responsive page

Question

I tried to find a solution here but couldn't find it. I'm working on this responsive design page. On mobile, when you tap menu, the main content div gets pushed aside (via Javascript) to reveal a left-fixed menu underneath. Everything works pretty fine except that when you see the webpage on a computer browser (resided to mimic mobile), open the menu and then expand the browser window till it hits the "desktop" breakpoint, the main content div remains pushed aside. Is there a way to reset the position of the content (main) div when maximized to the desktop breakpoint? I've tried many alternatives to no avail. Here's a jsfiddle link with the page: https://jsfiddle.net/luchosoto/wad3pmn0/1/

CSS for the main content div:

#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;

}

Javascript that pushes main div aside to show menu:

var counter = 1;
function toggleNav() {

if (counter == 1){
    document.getElementById("main").style.transform = "translateX(60%)";
    counter = 0;
}else{
    document.getElementById("main").style.transform = "translateX(0%)";
    counter = 1;
}
}

Thanks in advance.

Answer 1

While Zack Kirby's answer sounds logical and ntgCleaner's comment is very useful, you could also add this CSS which forces the main div position to where you want it: JSFiddle

@media screen and (min-width: 801px) {
  #main {
    transform: translateX(0) !important;
  }
}