我按照Reactjs上的這個教程來建立一個網(wǎng)站。但是，我的navbar的以下css文件加載不正確。

這是我的App.js文件。

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


function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />}>

          </Route>
        </Routes>
      </Router>
    </div >
  );
}

export default App;

這是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;
    }
}

這是我用過的Navbar.js文件。

import React from 'react'
import Logo from '../assets/pizzaLogo.png'
import { Link } from 'react-router-dom'
import '../styles/Navbar.css';

function Navbar() {
    return (
        <div classname="navbar">
            <div classname="leftSide">
                <img src={Logo} />
            </div>
            <div classname="rightSide">
                <Link to="/"> Home </Link>
                <Link to="/menu"> Menu </Link>
                <Link to="/about"> About </Link>
                <Link to="/contact"> Contact </Link>
            </div>
        </div>
    );
}

export default Navbar

根據(jù)教程，我應(yīng)該看到這個:

但是我看到了這個:

如果有幫助的話，我的瀏覽器是Arc。我也嘗試過使用css加載器。我不知道該怎么解決這個問題。