When using a media query, target tag does not disappear-CodePudding

Hi I think this is very simple question so I apologize in advance for not being able to resolve it myself. I'm trying to make tag disappear by media query when width of window becomes less than 1200px. But it doesn't disappear. I think it's a matter of inheritance. I'd appreciate if you let me know how to solve this.

this is NaviSearch.jsx file. I want to make top tag disappear

import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { Link } from "react-router-dom";


function NaviRecent (props) {
  return (
    <Link to="/login" style={{textDecoration : 'none'}}>
      <button id="NaviRecent">
        <img src={pencil} id="NaviRecentImage"/>
        <span id="NaviRecentText">최근강의</span>
      </button>
    </Link>
  );
}

export default NaviRecent;

and this file is css file. I only brought what seemed relevant

#Navi {
  position: sticky;
  background-color: #fff;
  width: 100%;
  height: 64px;
  top: -1px;
  z-index: 5;
  box-shadow: 0 2px 4px 0 hsl(0deg 0% 81% / 50%);
  width: 1263.330;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


#NaviRecent {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  right: 20px;
  width: 100px;
  height: 30px;
  padding: 8px;
  background: #00c471;
  color: #fff;
  border-radius: 4px;
}

#NaviHiddenLogo {
  display: none;
}

#NaviRecentText {
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin-left: 4px;
}

#NaviRecentImage {
  width: 15px;
  height: 15px;
}


@media screen and (max-width: 1020px) {

  #NaviRecent {
    display: none;
  }


}

CodePudding user response：

you should wrap into a tag like this :

import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { BrowserRouter as Router, Link } from "react-router-dom";

function NaviRecent(props) {
  return (
    <Router>
      <Link to="/login" style={{ textDecoration: "none" }}>
        <button id="NaviRecent">
          <img src={pencil} id="NaviRecentImage"/>
          <span id="NaviRecentText">최근강의</span>
        </button>
      </Link>

    </Router>
  );
}

export default NaviRecent;

Be carefull, in your css file max-width is 1020px and not 1200px as you mentioned in your statement. Hope it will help.