正如标题中所说，我正在学习，所以我想这样做

import Navbar from "../components/navbar";
import Footer from "../components/footer";
import Contactanos from "../components/contactanos";

export default function ContactanosPage() {
  return (
    <>
      <Navbar />
      <Contactanos />
      <Footer />
    </>
  );
}

当我转到本例中的路径是localhost：300/contacts时，组件一个叠加在另一个的顶部，除了页脚，它位于所有内容的下面。
在这里我发送组件的代码

import '../css/footer.css'
export default function Footer() {
    return (
        <div className="pie-pagina">
            <div className="grupo-2">
                <small>&copy; 2023 <b>Los Mixturiados</b> - Todos los Derechos Reservados.</small>
            </div>
        </div>
    )
}

import { Link } from "react-router-dom";
import '../css/navbar.css'

export default function Navbar() {

    return (
        <>
            <div className="contenedor-header">
                <header>
                    <div className="logo">
                        <a href="/">Los Mixturiados</a>

                    </div>
                    <nav className="nav">
                        <ul>
                            <li><Link to={'/'}>INICIO</Link></li>
                            <li><Link to={'/menus'}>MENUS</Link></li>
                            <li><Link to={'/contacto'}>CONTACTAME</Link></li>
                        </ul>
                    </nav>
                    <div className="nav-responsive">
                        <i className="fa-solid fa-bars"></i>
                    </div>
                </header>

            </div></>
    )
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Home from './routes/Home';
import Menus from './components/Menus';
import ContactanosPage from './routes/ContactanosComp';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    errorElement: <h1>Ocurrio un Error</h1>
  },
  {
    path: '/menus',
    element: <Menus />,
  },
  {
    path: '/contacto',
    element: <ContactanosPage/>,
  }
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

reportWebVitals();

我试图尽一切努力创建另一个div，用insibile div来做<></>我已经尝试了一切，但我不能让它很好地适应我可以改进什么或我可以改变什么？