Sticky Nav Bar - In react with css module using gastby

Container.js

import React from "react"
import containerStyles from "./container.module.css"

const Container = ({ children }) => {
  return <div className={containerStyles.container}>{children}</div>
}

export default Container

container.module.css

.container {
  margin: 100px auto;
  max-width: 1000px;
}

@media screen and (max-width: 1024px) {
  .container {
    margin: 100px auto;
    max-width: 750px;
  }
}

@media screen and (max-width: 768px) {
  .container {
    margin: 100px auto;
    max-width: 550px;
  }
}

@media screen and (max-width: 480px) {
  .container {
    margin: 100px auto;
    max-width: 300px;
  }
}

navbar.js

import React from "react"
import { Link } from "gatsby"
import styles from "./navbar.module.css"

const NavBar = () => {
  return (
    <div className={styles.navlinks}>
      <Link to="/" className={styles.userName}>PUNITH K</Link>
      <div className={styles.navItems}>
        <Link className={styles.link} to="/">
          HOME
        </Link>
        <Link className={styles.link} to="/about">
          ABOUT
        </Link>
        <Link className={styles.link} to="/css-mods">
          USERS
        </Link>
      </div>
    </div>
  )
}

export default NavBar

navbar.module.css

.navlinks {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0; /* must set to top */
  width: 100%;
  background: white;
  box-shadow: 0 5px 20px -10px #000;
  min-height: 50px;
}

.userName {
  text-decoration: none;
  padding-left: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: 500;
}

.navItems {
  display: flex;
  align-items: center;
  justify-content: center;
}

.link {
  padding: 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 200;
  letter-spacing: 2.5px;
  color: #333;
}

.link:hover {
  color: yellowgreen;
}

@media screen and (max-width: 480px) {
  .userName {
    padding-left: 25px;

    font-size: 18px;
    font-weight: 800;
  }

  .link {
    padding: 8px;
    font-size: 16px;
  }
}