応答ページでdivの位置がリセットされない

Question

ここで解決策を見つけようとしましたが、見つけられませんでした。 私はこのレスポンシブデザインページに取り組んでいます。モバイルでは、メニューをタップすると、メインのコンテンツ部門が（Javaスクリプトを介して）プッシュされて、左下に固定メニューが表示されます。コンピュータのブラウザ（モバイルを模倣している）にウェブページが表示され、メニューを開き、ブラウザのウィンドウを展開して「デスクトップ」ブレークポイントに達すると、メインのコンテンツdivは脇に押し付けられます。 デスクトップのブレークポイントまで最大化されたときにコンテンツ（メイン）divの位置をリセットする方法はありますか？私は役に立たない多くの選択肢を試した。メインコンテンツのdivのためhttps://jsfiddle.net/luchosoto/wad3pmn0/1/

CSS：事前に

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; 
} 
} 

ありがとう：メニューを表示するために脇にメインの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を はこちらのページでjsfiddleのリンクです。

Answer 1

ザックカービィの答えは論理的に聞こえるとntgCleanerさんのコメントは非常に便利です、あなたも、あなたがそれをしたい場所に、メインdivの位置を強制的にこのCSSを追加することができますが：JSFiddle

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

Answer 2

divを移動するためにjavascriptを使用しているので、javascriptを使用して移動する必要があります。ウィンドウでそれを行う必要があります。リスナーを調整しないでください。あなたはそれを達成するためにthis answerのようなものを使うことができます。