Media query not working with CSS modules in React

Question

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;

Answer 1

It should be .navContainer

@media (max-width: 768px) {
  .navContainer {
    color: red;
  }
}