title: Is my CSS code not set up correctly for media queries?
body: <p>Ok so first off I apologise if my title is not very clear! I'm fairly new to css and currently following the landing page project with freecodecamp, I'm at the point where I wanted to start adding media queries to my code (maybe should have added them as I went along). I'm using there example code as a reference to see what I should be doing, but it just seems that no matter what media queries I add the page doesn't respond how I expect it too, or it just messes up the whole css code!</p>
  
  <p>Here is a link to my codepen - <a href="https://codepen.io/rorymx/pen/XWmbbzY" rel="nofollow noreferrer">https://codepen.io/rorymx/pen/XWmbbzY</a>
  and this is some of the html and css from it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;header id="header"&gt;
      &lt;div id="img-div"&gt;
        &lt;img id="header-img" src="https://i.pinimg.com/236x/2d/50/8b/2d508b7019bf7b8711673825c7bd3252.jpg"&gt;
      &lt;/div&gt;
  
      &lt;nav id="nav-bar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#features"&gt;Features&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#how-it-works"&gt;How it works&lt;/a&gt; &lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-link" href="#pricing"&gt;Pricing&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
    &lt;/header&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>please ignore the look its just temporary as the code is mainly what I'm playing about with.</p>
  
  <p>For example. one of the media queries i was trying to add was</p>
  
  <pre><code>@media (max-width: 650px) header{flex-wrap: wrap;} 
  </code></pre>
  
  <p>to the header</p>
  
  <pre><code>@media (max-width: 650px) {
  nav {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 50px;
  }
  }
  </code></pre>
  
  <p>which i got from the example code, which i played about with but it just seemed to mess everything up!</p>
  
  <p>If anyone could shed some light as why this may be happening, or if i've not set some things up properly, or if the code is just complete rubbish and needs starting again! </p>