响应式菜单的问题

Question

我的网站在大屏幕上有一个水平导航菜单。我试图让它在移动屏幕上响应。当我在笔记本电脑上缩小屏幕尺寸并在 Chrome Responsive Viewer 上查看网站时，它运行良好。当我在手机上打开它时，菜单出现在屏幕右侧，整个网站出现在左侧。我不知道为什么。

这里是菜单的html代码：

<nav>
            <a href="index.html"><img src="images/sst_title_shadow.png"></a>

            <div class="nav-links" id="navLinks">
               <i class="fa fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="walpd.html">WEDDING TRAVEL</a></li>
                    <li><a href="pvp.html">PERSONALIZED VACATIONS</a></li>
                    <li><a href="corporate.html">BUSINESS TRAVEL</a></li>
                    <li><a href="cruises.html">CRUISES</a></li>
                    <li><a href="air.html">ALL-INCLUSIVE RESORTS</a></li>
                    <li><a href="yot.html">YOUTH TRAVEL</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>`

全屏的CSS：

nav{
    display: flex;
    width:100%;
    padding: 1% 0;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}
.nav-links{
    flex: 1;
    text-align: center;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position:relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
   }
.nav-links ul li::after{
    content: '';
    width:0%;
    height: 2px;
    background: #6d2771;
    display:block;
    margin:auto;
    transition: 0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
    cursor: pointer;
}
nav .fa{
    display:none;
}

媒体查询

/**MEDIA QUERY MAX WIDTH FOR MOBILE PHONES**/
@media only screen and (max-width: 480px){
/*************NAVIGATION BAR********/  
nav{
    background-image: none;
}
.nav-links ul li {
    display: block;
}
.nav-links{
    position: absolute;
    background-color: #6d2771;
    width: 200px;
    right:-200px;
    text-align: left;
    z-index: 10;
    transition: 1s;
 }
nav .fa{
    display: block;
    color:#fff;
    margin:10px;
    font-size:22px;
    cursor:pointer;
}
nav .fa-bars{
    display: block;
    color:#6d2771;
    margin:10px;
    font-size:22px;
    cursor:pointer;
    position: relative;
    top:-325px;
}
nav .fa-times{
    position: relative;
    top:15px;
}
.nav-links ul{
    padding:30px;
}
.nav-links ul li a:hover{
color: white;
text-decoration: none;
font-size: 16px;
}
.nav-links ul li::after{
content: '';
width:0%;
background: #fff;
display:block;
margin:auto;
transition: 0.25s;
}
}