Broke My Media Query Some How - html

Question

[link]http://ramadaan.rocks/test.html?nocache=1
Somehow I broke my media query. Trying to make a nav and now when under 600px, the media query seems to not be working.
So where is the media query being broken? Is the nav too long? Too many list items?
Any help? Thanks,
.nav ul {
list-style: none;
background-color: #000;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Francois One', sans-serif;
font-size: 20px;
text-transform: uppercase;
line-height: 40px;
height: 40px; /* line-height and height set at same value centers the content vertically in the middle */
border-bottom: 1px solid #888;
color: #fff;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #e17143;
}
.nav a.active {
background-color: #fff;
color: #e17143;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 14px;
}
}
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
<div class="nav">
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>What Is Ramadan?</li>
<li>How Do I Fast?</li>
<li>Who Can Fast?</li>
<li>Prophetic Commentary</li>
<li>Tarawih Prayer</li>
<li>30 Ajza' of Qur'an</li>
<li>Commonly Asked Questions</li>
<li>Contact</li>
</ul>
</nav>