title: Why is this flexbox media query not working?
body: <p>New to this, be nice :) (and pardon the sloppy code) I did search and already have found help here. Been helping redo an ebay store at work. Trying to get this media query to work with flexbox. From what I understand, a media query can't be used inline, but can be used inside style tags inside the head without having to link to external css.</p>
  
  <p>here's a codepen of the layout. I've even tested other media queries, (there is one in there now) and they work. But I want the flex items to wrap to the full 100% width once screen size is smaller, and it won't seem to work. </p>
  
  <p>I know I'm targeting the right rule because it was tested without the query:</p>
  
  <pre><code>.flex-item {
     width: 100%;
  }
  </code></pre>
  
  <p>and it does what I want it to do...How come the background color query works inside the HTML, while the flex query does not?</p>
  
  <p>I'm sure it's something dumb.</p>
  
  <p><a href="https://codepen.io/pmendola/pen/MXjwza" rel="nofollow noreferrer">https://codepen.io/pmendola/pen/MXjwza</a></p>
  
  <p>(i removed some of the code for simplicity - there are only a few flex rules in use, right at the top of the css)</p>