I was learning CSS modules in React and faced the confusion on why media query is not working. Here is the code:

Header.module.css file

 .nav {

      list-style: none;

      display: flex;

      justify-content: flex-end;

      margin: 0;

      padding: 0;

    }



    .link {

      margin-left: 20px;

    }



    .navContainer {

      display: flex;

      align-items: center;

      justify-content: flex-end;

    }



    .header {

      background-color: red;

    }



    @media (max-width: 768px) {

      .nav-container {

        color: red;

      }

    }

Header.js file:

import React from react; 

import styles from ./Header.module.css; 

const header = ({ home, about, contact }) => {   return (

    <div className=row>

      <div className=col-md-4>

        <i className=fa fa-3x fa-github></i>

      </div>

      <div className={`col-md-8 ${styles.navContainer}`}>

        <nav>

          <ul className={styles.nav}>

            <li className={styles.link}>{home}</li>

            <li className={styles.link}>{about}</li>

            <li className={styles.link}>{contact}</li>

          </ul>

        </nav>

      </div>

    </div>   ); };



export default header;