Не работают @media запросы CSS?

Question

[vladosJavaScript]

Пишу сайт на React Js начал делать адаптивное меню, изначально ширина изменялась при ширине 600px а затем резко перестала, теперь ни в какую что бы я не писал, media в конце всей страницы, "meta viewport...." и тд тоже есть в index.html , снизу код:

Menu.js:
import React from 'react';
import './ComponentsStyles/MenuStyles.css';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

export default class Menu extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			
		}
	}	

	render() {
		return (
			<>
			 	<header className="menu">
			  		<div className="menu__logo">
			  			<a href="/" className="logo">TRVL <i className="fab fa-typo3"></i></a>
			  		</div>
			  		<div className="menu__links">
			  			<ul>
			  				<li><a href="/">Home</a></li>
			  				<li><a href="/services">Services</a></li>
			  				<li><a href="/products">Products</a></li>
			  				<div id="sign"><a href="/sign-up">SIGN UP</a></div>
			  			</ul>
			  			<i class="fa fa-bars" id="bars"></i>
			  		</div>
			  	</header>
			</>
		);
	}
}

MenuStyles.css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

a, i {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.menu {
	width: 1325px;
	height: 90px;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	background-color: rgb(45, 33, 33);
}

.logo {
	margin-top: 25px;
	margin-left: 100px;

	font-weight: bold;
	font-size: 35px;
	display: inline-block;
}

.menu__links {
	height: inherit;

	float: right;
	margin-top: -60px;
}

.menu__links ul li {
	display: inline-block;
	margin-right: 80px;
	font-size: 20px;
}

#sign {
	width: 150px;
	height: 50px;
	border: 2px solid #fff;
	
	box-sizing: border-box;
	margin-top: -20px;
	margin-right: 50px;
	padding-top: 8px;

	justify-content: center;
	align-items: center;
	text-align: center;
	
	display: inline-block;
}

#bars {
	display: none;
}

@media screen and (max-width: 600px) {
	.menu__links ul li {
		display: none;
	}
	#sign {
		display: none;
	}
	.menu {
		width: 600px;
		height: 50px;
	}
	#bars {
		display: block;
	}
}