title: Broke My Media Query Some How
body: <p>[link]<a href="http://ramadaan.rocks/test.html?nocache=1" rel="nofollow">http://ramadaan.rocks/test.html?nocache=1</a></p>
  
  <p>Somehow I broke my media query. Trying to make a nav and now when under 600px, the  media query seems to not be working. </p>
  
  <p>So where is the media query being broken? Is the nav too long? Too many list items?</p>
  
  <p>Any help? Thanks,</p>
  
  <pre><code>.nav ul { 
  list-style: none; 
  background-color: #000; 
  text-align: center; 
  padding: 0;
  margin: 0;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.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;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav a { 
  text-decoration: none; 
  color: #fff; 
  display: block;
  transition: .3s background-color;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav a:hover { 
  background-color: #e17143; 
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav a.active { 
  background-color: #fff; 
  color: #e17143; 
  cursor: default; 
  </code></pre>
  
  <p>}</p>
  
  <pre><code>@media screen and (min-width: 600px) { 
  .nav li { 
      width: 120px; 
      border-bottom: none; 
      height: 50px; 
      line-height: 50px; 
      font-size: 14px; 
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav li { 
  float: left;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav ul { 
  overflow: auto;
  width: 600px;
  margin: 0 auto;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.nav { 
  background-color: #444;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="active" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;What Is Ramadan?&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;How Do I Fast?&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Who Can Fast?&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Prophetic Commentary&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Tarawih Prayer&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;30 Ajza' of Qur'an&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Commonly Asked Questions&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>