title: Why my media queries don't work?
body: <p>I made a page with code from <a href="http://zellwk.com/blog/from-html-grids-to-css-grids/" rel="nofollow">Moving from HTML Grid Systems to CSS Grid Systems</a>. But my page doesn't work as it has to, media queries seem to be not working. Why don't they work? CSS lint says there are some problems <a href="http://i.stack.imgur.com/oLfh7.png" rel="nofollow">CSS Lint</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- &lt;meta name="viewport" content="width=device-width"&gt; --&gt;
    &lt;title&gt;Flex-training&lt;/title&gt;
    &lt;link rel="stylesheet" href="main.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="l-flex"&gt;
      &lt;div id="back" class="l-fg3"&gt;
        &lt;div&gt;Featured Item&lt;/div&gt;
        &lt;div&gt;Featured Item&lt;/div&gt;
        &lt;div&gt;Grid item&lt;/div&gt;
        &lt;div&gt;Grid item&lt;/div&gt;
        &lt;div&gt;Grid item&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.l-fg3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin: -10px;
  }
  
  .l-fg3 &gt; div {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    @media screen and (min-width: 600px) {
      margin: 10px;
      -webkit-flex-basis: calc(33.333%-20px);
          -ms-flex-preferred-size: calc(33.333%-20px);
              flex-basis: calc(33.333%-20px);
    }
  
    &gt; div:nth-child(1),
    &gt; div:nth-child(2) {
      @media (min-width: 600px) {
        flex-basis: calc(50% - 20px);
      }
    }
  }
  
  .l-flex {
    overflow-x: hidden;
  }
  
  
  div {
    border: 0.2px solid #506183;
    border-radius: 5px;
    background-color: #81f6a9;
  }
  #back {
    background-color: #36a4c3
  }    
  </code></pre>