React JS, HTML, CSS, display:none not working

Good evening, I'm prettly new to React and I'm trying to clone an existing template (showcasy of UI8 Team) to practice. This is the actual look:

What I want to do is to use a media query with max-width: 767px where I want to remove the top right "Let's Talk" button. I added "display: none" to .nav-buttons:first-child (which is the class that wraps the two buttons, and the first child represents the "Let's Talk" button) but nothing changes and the button still appears. Where should I be wrong?

Navbar.jsx:

import './css/Navbar.css';
import RoundedButton from "./RoundedButton";
 
const Navbar = () => {
  const enableOverlay = () => {
    const overlay = document.querySelector('.overlay');
 
    overlay.classList.add('active');
  }
 
  return (
    <nav data-aos="fade-up" data-aos-duration="1000">
      <h2>showcasy.</h2>
 
      <div className="nav-buttons">
        <RoundedButton text="Let's Talk" icon="return-up-forward-outline" invert={false} />
        <RoundedButton func={() => enableOverlay()} text="" icon="menu-outline" invert={false}/>
      </div>
    </nav>
  );
};
 
export default Navbar;

Navbar.css:

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 60px;
}
 
.nav-buttons {
  display: flex;
  align-items: center;
}
 
@media (max-width: 767px) {
  .nav-buttons:first-child {
    display: none !important;
  }
}

RoundedButton.jsx:

import './css/RoundedButton.css';
 
const RoundedButton = ({func, text, icon, invert, whiteBorder}) => {
  return (
    <button
      style={whiteBorder && invert ? {border: "1px solid #fff"} : null}
      onClick={func != null ? func : null}
      className={`custom-btn ${invert ? "invert" : ""}`}
      type="button">{text} {icon !== "" ? <ion-icon name={icon}></ion-icon> : null}
    </button>
  )
}
 
export default RoundedButton;

RoundedButton.css:

.custom-btn {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  color: #030712;
  background: linear-gradient(to left, white 50%, black 50%) right;
  background-size: 200%;
  transition: .5s ease-in-out;
  border: 1px solid #030712;
  outline: none;
  padding: 12px 24px;
  margin: 0 8px;
  border-radius: 100px;
}
 
.custom-btn:hover {
  color: #ffffff;
  background-position: left;
}
 
.custom-btn.invert {
  color: #ffffff;
  background: linear-gradient(to left, #030712 50%, white 50%) right;
  background-size: 200%;
}
 
.custom-btn.invert:hover {
  color: #030712;
  border: 1px solid #030712;
  background-position: left;
}

I thought it could be the display flex of the rounded button (which I use to align the text and the icon of a button), but I tried to remove it and still does not work.

This problem is actually quite simply fixed by using the correct css selector... You need to select the button that is the first child.... the .nav-buttons is the container yes... But the button is what you need to attach to being the first child of that container you can do such by doing the following.
I recommend you learn your css selectors better you can do that here

.nav-buttons > button:first-child {
   display: none !important;
}

As far as addressing your SO code problems, you need to use ``` of thsese at the beginning and end of your code snippet (easiest way for me anyway) and then put your code in the lines below and above (i.e. you put these three above and below all the lines).