What part of my CSS is stopping the media queries from working? React-app

I would like to have my Navbar go from being a row to a column when the screen reaches below 480px. After some trial and error, I am not sure if it's the position: fixed or position: sticky. Is there any way to fix this?

import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import "./Nav.css";

function Nav() {
  // creating a piece of state for showing the logo when we scroll
  const [show, handleShow] = useState(false);
  const history = useHistory();

  const transitionNavBar = () => {
    // if you have scrolled vertically more than 100 on your screen, show the black background of the navbar
    if (window.scrollY > 100) {
      handleShow(true);
      // if not, don't show the black background of the navbar
    } else {
      handleShow(false);
    }
  };

  // a listener for when we scroll on the screen
  useEffect(() => {
    // every time we scroll, listen for it and trigger the function transitionNavBar that we just made
    window.addEventListener("scroll", transitionNavBar);
    // when the component mounts, clean up the function so it isn't permanently attached to the listener
    return () => window.removeEventListener("scroll", transitionNavBar);

    // the empty brackets mean it will only run when it mounts / re-renders
  }, []);
  return (
    <div className={`nav ${show && "nav__black"}`}>
      <div className="nav__contents">
        <img
          onClick={() => history.push("/")}
          className="nav__logo"
          src="https://i.imgur.com/da52IhK.png"
          alt=""
        />
        <img
          onClick={() => history.push("/profile")}
          className="nav__avatar"
          src="https://pbs.twimg.com/profile_images/1240119990411550720/hBEe3tdn_400x400.png"
          alt=""
        />
      </div>
    </div>
  );
}

export default Nav;

.nav {
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;

  /* Animations */
  transition-timing-function: ease-in;
  transition: all 0.5s;
}

.nav__black {
  background-color: #111;
}

.nav__contents {
  display: flex;
}

.nav__logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 12rem;
  height: 12rem;

  padding-right: 1rem;
  padding-left: 1rem;

  object-fit: contain;
  cursor: pointer;
}

.nav__avatar {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  width: 8rem;
  height: 8rem;
  padding-left: 1rem;
  cursor: pointer;
  border-radius: 4rem;
}

@media only screen and (min-device-width: 480px) {
  .nav {
    flex-direction: row;
  }
}

@media only screen and (max-device-width: 480px) {
  .nav {
    flex-direction: column;
  }
}

Is the problem with the parent divs? Or am I able to fix this by changing the child divs?