"display:flex;" is not working. (CSS, JavaScript, React ,React Router V6)-CodePudding

I have been having a problem with "display: flex;" to locate the "create a post" part to next to the side menu bar(Home, Profile etc.) , but it seems "display: flex;" does not work and it is located vertically instead. I have been thinking it is because I am using div in a wrong way or because of react router V6. Can anyone help with locating it horizontally? Thank you.

My codes and the result image is as below.

App.js

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoginHeader from "./LoginHeader.js";
import { Outlet } from "react-router";
import Login from "./Login.js";
import RegisterHeader from "./RegisterHeader.js";
import Register from "./Register.js";
import HomeHeader from "./HomeHeader.js";
import Sidebar from "./Sidebar.js";
import Post from "./Post.js";
import News from "./News.js";

function App() {
  return (
      <Router>
      <div className="App">
        <Routes>
          <Route path = "/" element = {<LoginHeader />} />
        </Routes>
        <Routes>
             <Route path = "/" element = {<Login />} />
        </Routes>
        <Routes>
          <Route path = "/register" element = {<RegisterHeader />} />
        </Routes>
        <Routes>
          <Route path = "/register" element = {<Register />} />
        </Routes>
        <Routes>
          <Route path = "/home" element = {<HomeHeader />} />
        </Routes>
          <Routes>
            <Route path = "/home" element = {<div className = "appBody"> <Sidebar /> </div>} />
          </Routes>
          <Routes>
            <Route path = "/home" 
            element = {<div className = "homePosts"> <Post /> </div>} />
          </Routes>
          <Routes>
            <Route path = "/home" element = {<News />} />
          </Routes>
          </div>
      </Router>
    
  );
}

export default App;

App.css

.appBody {
    display: flex;
}

.homePosts {
    display: flex;
    justify-content: center;
}

Result Image

CodePudding user response：

Import App.css file in App.js or root file index.js.

Like this , if css file is in same folder

import './App.css';

CodePudding user response：

It is happening reason of the wrong placed div and flex property, update your code like this, it will work. please give a rating and comment if it's working for you.

   <div className="App">
     <Routes>
       <Route path="/" element={<h1>Login Header</h1>} />
     </Routes>
     <Routes>
       <Route path="/" element={<h2>Login</h2>} />
     </Routes>
     <Routes>
       <Route path="/register" element={<h3>Register Header</h3>} />
     </Routes>
     <Routes>
       <Route path="/register" element={<h4>Register</h4>} />
     </Routes>
     <Routes>
       <Route path="/home" element={<h5>HomeHeader</h5>} />
     </Routes>
     <div className="container">
       <Routes>
         <Route path="/home" element={<h6>Sidebar</h6>} />
       </Routes>
       <div className="appBody">
         <Routes>
           <Route
             path="/home"
             element={
               <div className="homePosts">
                 <p>Post</p>
               </div>
             }
           />
         </Routes>
         <Routes>
           <Route path="/home" element={<i>News</i>} />
         </Routes>
       </div>
     </div>
   </div>
 </Router>



.container {
display: flex;
}
.appBody {
display: flex;
flex: 1;
}
.homePosts {
display: flex;
justify-content: center;
flex: 1;
}