我的侧边栏固定在屏幕的左侧，但它与主要内容重叠。我希望我的主要内容显示在导航栏的一侧，但无论我尝试什么样式，主要内容不会让步。我怎样才能使主要内容div出现在导航栏旁边，并且能够在导航栏保持不变的情况下上下滚动？
App.js

return (
    <div>
      {
        authUser ? <>
          <BrowserRouter>
              <Sidebar>
                <Routes>
                  <Route path="/" element={<Dashboard/>} />
                  <Route path="/dashboard" element={<Dashboard/>} />
                  <Route path="/analytics" element={<Analytics/>} />
                  <Route path="/userbase" element={<Userbase/>} />
                  <Route path="/about" element={<About/>} />
                </Routes>
              </Sidebar>
          </BrowserRouter>
        </>
        : 
        <div className='landing-page'>
          <SignIn />
        </div> 
      }
    </div>
    
    
  );
}

App.css

.landing-page {
    width: 100%;
    border: solid red 1px;
}

.btn-signin {
    width: 100%;
  }

.sign-element {
    width: 1000px;
}

Sidebar.js

return (
        <div className="container">
           <div style={{width: isOpen ? "250px" : "50px"}} className="sidebar">
               <div className="top_section">
                   <h1 style={{display: isOpen ? "block" : "none"}} className="logo">Changed</h1>
                   <div style={{marginLeft: isOpen ? "50px" : "0px"}} className="bars">
                       <FaBars onClick={toggle}/>
                   </div>
               </div>
               {
                   menuItem.map((item, index)=>(
                       <NavLink to={item.path} key={index} className="link" activeclassname="active">
                           <div className="icon">{item.icon}</div>
                           <div style={{display: isOpen ? "block" : "none"}} className="link_text">{item.name}</div>
                       </NavLink>
                   ))
               }
               <button onClick={userSignOut}>Sign Out</button>
           </div>
           <main className="mainContent">{children}</main>
        </div>
    );
};

Sidebar.css

.link {
    display: flex;
    color: #fff;
    padding: 10px 15px;
    gap: 15px;
    font-size: 20px;
    align-items: center;
    text-decoration: none;
}

.active {
    color: black;
}

.mainContent {
    /* display: inline-block; */
}

.container {
    width: 100%;
    float: left;
}

.sidebar {
    background: #000;
    color: #fff;
    height: 100vh;
    width: 200px;
    transition: all 0.5s;
    position: fixed;
    z-index: 1;
    float: left;
}

.top_section {
    display: flex;
    align-items: center;
    padding: 20px 15px;
}

.logo {
    font-size: 30px;
}

.bars {
    display: flex;
    font-size: 25px;
    margin-left: 50px;
}

.link {
    display: flex;
    color: #fff;
    padding: 10px 15px;
    gap: 15px;
}

.link:hover {
    background-color: orange;
    color: #000;
    transition: all 0.5s;
}

.active {
    background: orange;
    color: black;
}

.icon, .link_text {
    font-size: 20px;
}

overlapping example: collapsed
overlapping example: expanded