Changes in #media do not appear - html

Question

I tried to create a responsive menu for a smaller screen, but the icon fa fa-bar would not appear, even though I set display: block inside media query. I wonder what the priority in css is. I followed a tutorial on reponsive menu, yet my code in media does not reflect on the smaller screen.
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
.nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: white;
text-decoration: none;
font-weight: 500;
}
.nav-links ul li::after {
content: "";
width: 100%;
height: 2px;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: #012a5d;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav.fa {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
<nav>
<div class="logo">
<img src="images/Logos/University of Toronto Logos/U of T Signature_Reverse RGB (1).png">
</div>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Home</li>
...
<li><a href="contact.html" class="button-header">
<div class="button-font">
Contact Us
</div>
</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu()
{navlinks.style.right ="0";}
function hideMenu()
{ navlinks.style.right = "-200";}
</script>
how the menu looks like on a big screen