显示 React 组件

Question

我正在学习 React，我正在练习构建小型应用程序； 有一个非常简单的事情，我无法真正理解。如何将两个 React 组件并排放置而不重叠？？？？

我有这样的 RootLayout：

import React from "react";
import { Outlet } from "react-router-dom";
import Footer from "./Footer";
import Header from "./Header";
import SideBar from "./SideBar";

const RootLayout = ()=>{
    return( 
    <>
      <Header /> 
      <SideBar />
      <Outlet />
      <Footer/>
    </>
    )
}

export default RootLayout

And 和 是始终出现在布局中的元素。

我有一个组件主页：

import React from "react";
import classes from "./Homepage.module.css";
import FirstImage from "../../assets/images/image-2.jpg";

const HomePage = () => {
  return (
     <div className={classes.FirstSection}>
    <div className={classes.FirstContainer}>
        <h1 className={classes.titleHome}>
        CONSIGLI, INFO E TANTE NOVITÀ SUL MONDO DEL MATERIALE ELETTRICO
      </h1>
      <div className={classes.backgroundImage}>
        <img src={FirstImage}></img>
      </div>
    </div>
  </div>
  )
};

export default HomePage;

将加载为页面的初始路由，在 App.js 中声明：

import "./App.css";
import {createBrowserRouter, RouterProvider} from 'react-router-dom'
import RootLayout from "./Components/RootLayout";
import ErrorPage from './Components/Error';
import HomePage from './Components/HomePage/Homepage';

 const routes = createBrowserRouter([
  {path:'', element:<RootLayout/>,
  errorElement: <ErrorPage />,
    children: [
      { path: '', element: <HomePage /> },
    ],
  },
])

function App() {
  return (
    <div className="App">
   <RouterProvider router={routes}/>
    </div>
  );
}

export default App;

我想将侧边栏放在主页旁边，这样其余的内容，即使是其他组件，也总是在侧边栏的一侧，但目前它们是一个接一个地放置，或者具有位置属性但是烦人的重叠是由 Header 和 Footer 组件创建的。 谢谢