Почему мой Navbar.css не появляется на странице Localhost? ⇐ Html

[Anonymous]

Я зачислен в курс веб -разработки с полным стеком и в настоящее время реагирует на обучение на стороне, чтобы создать проект для моего портфолио в надежде попасть в позицию разработчика передней паутины. Благополучие, которое я не смог преодолеть.import React, { useState } from 'react';
import Logo from '../images/HHlogo.jpg';
import { Link } from 'react-router-dom';
import "../styles/Navbar.css";

function Navbar() {
return (




Home
About
Classes
Gallery
Trainer
Testimonial
Contact


);
}

export default Navbar


src/styles/navbar.css
.navbar {
width: 100%;
height: 100px;
background-color: #121619;
display: flex;
flex-direction: row;
}

.navbar .leftSide {
flex: 50%;
height: 100%;
display: flex;
align-items: center;
padding-left: 150px;
}

.navbar .leftSide img {
width: 70px;
}

.navbar .rightSide {
flex: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.navbar a {
color: white;
text-decoration: none;
margin: 20px;
}

.navbar .rightSide button {
background-color: transparent;
border: none;
color: white;
cursor: pointer;
}

.navbar .rightSide svg {
font-size: 40px;
}

.navbar #open {
padding-left: 0px;
}
.navbar #open img {
display: none;
}

.navbar #close img {
display: inherit;
}

.navbar #open .hiddenLinks {
display: inherit;
margin-left: 30px;
}

.navbar #close .hiddenLinks {
display: none;
}

.navbar #open a {
width: 70px;
margin: 5px;
}
@media only screen and (max-width: 900px) {
.navbar .rightSide a {
width: 70px;
}
.navbar .leftSide {
padding-left: 50px;
}
}

@media only screen and (max-width: 600px) {
.navbar .rightSide a {
display: none;
}

.navbar .rightSide {
justify-content: flex-end;
padding-right: 50px;
}

.navbar .rightSide button {
display: inherit;
}
}

@media only screen and (min-width: 600px) {
.navbar .rightSide button {
display: none;
}

.hiddenLinks {
display: none;
}
}

src/app.js
import React from 'react';
import Home from './pages/Home';
import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
return (








);
}

export default App;

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById("root");
ReactDOM.render(


,
document.getElementById('root')
);


Подробнее здесь: https://stackoverflow.com/questions/778 ... lhost-page