In scss

@media (max-width:600px) {
        .f-nav {
              flex-wrap:wrap;
          }
      }

In css

@media (max-width: 600px) {
  .f-nav .f-nav {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

Its breaking my nav bar. Thank you in advance.

This is my whole scss 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;
          }
      }    
}

CodePudding user response：

It's because your scss is nested.
If you cut the unrelated part it looks like this:

.f-nav {
  
  /*  
   Omitted styles
  */

  @media (max-width:600px) {
    .f-nav {
      flex-wrap:wrap;
    }
  }
}

This should fix it:
(You are already inside .f-nav so there's no need to write it again)

.f-nav {
  
  /*  
   Omitted styles
  */

  @media (max-width:600px) {
    flex-wrap:wrap;
  }
}

Furthermore, this is just a matter of taste, but I like to add my media queries right after, so I don't have to scroll too much to understand what's happening.
Here's an example using your whole scss:

.f-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  @media (max-width:600px) {
    flex-wrap: wrap;
  }

  p {
    font-size: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    margin-right: auto;
    padding-left: 3rem;

    @media (max-width:600px) {
      text-align: center;
      align-items: center;
      padding-left: 10rem;
    }
  }

  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;
  }
}

CodePudding user response：

Did you make a different file for your scss code? You should make a separate file with the scss code and run with the extension watch sass.