title: Why does my div class name in scss duplicate in css?
body: <p>In scss</p>
  <pre><code>@media (max-width:600px) {
          .f-nav {
                flex-wrap:wrap;
            }
        }
  </code></pre>
  <p>In css</p>
  <pre><code>@media (max-width: 600px) {
    .f-nav .f-nav {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
  }
  </code></pre>
  <p>Its breaking my nav bar.
  Thank you in advance.</p>
  <p>This is my whole scss code.</p>
  <pre><code>.f-nav {
      display:flex;
      justify-content:space-between;
      width:100%;
      height:100%;
      p {
          font-size:2rem;
          font-family:'Bebas Neue', sans-serif;
          margin-right:auto;
          padding-left:3rem;
      }
         li {
           display:inline-block;
           list-style:none;
          
         }
           a {
             display:inline-block;
             font-size:1.5rem;
             color:rgb(0, 0, 0);
             text-decoration:none;
             list-style:none;
             font-family:'Bebas Neue', sans-serif;
             padding:0 20px;
             margin-top:1.3rem;
           }
        @media (max-width:600px) {
          .f-nav {
                flex-wrap:wrap;
            }
        }
        
        @media (max-width:600px) {
            p {
                text-align:center;
                align-items:center;
                padding-left: 10rem;
            }
        }    
  }
  </code></pre>