css - レスポンシブ ナビゲーション メニュー フィット

Question

初めてレスポンシブ Web サイトを作成していますが、ナビゲーション メニューに小さな問題があります。

ほとんどのサイズで仮想グリッドにスナップしますが、ウィンドウのサイズを水平方向に縮小すると、位置が失われるポイントになります。ウィンドウの残りの最小幅を 350px に設定し、サイトの残りの部分が制約する仮想線にスナップさせたいと考えています。現在、「right: 12.5%」では境界線をたどります。

ウェブサイトはここにあります: www.ultimate-punch.com

    /*MEDIA QUERY*/
@media only screen and (max-width : 960px) {
    #main_menuicon {
        display:inline-block;
    }

    nav ul, nav:active ul { 
        display: none;
        position: absolute;
        background: #000;
        border: 5px solid #444;
        top: 30px;
        width: 150px;
        right: 12.5%;
        margin: auto;
        height: 200px;
        line-height: 1;
    }

    nav li {
        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;
        font-size: 18px;
        word-wrap: normal;
    }

    nav:hover ul {
        display: block;
    }

    #main_nav li {
        margin-left: 0;
    }
}