Home loads under navabr - css

Question

import Home from './components/Home/Home.jsx'
import Navbar from './components/Navbar/Navbar'
import {BrowserRouter, Routes, Route} from "react-router-dom"
export default function App() {
return (
<BrowserRouter>
<Navbar />
<div className="container">
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
</BrowserRouter>
);
}
App.css:
.container {
flex: 1;
display: flex;
flex-direction: column;
}
Navbar CSS
import React from "react";
import cart from "../assets/images/cart.png"
import { TfiMenu } from "react-icons/tfi";
import { AiOutlineCloseCircle} from "react-icons/ai";
export default function Navbar() {
const [open, setopen] = React.useState(false);
let Links = [
{name:"Home" ,link:"/"},
{name:"Headphone" ,link:"/"},
{name:"Speaker" ,link:"earphones"},
{name:"Earphone" ,link:"/"},
];
const change= ()=> {
setopen(!open);
}
return (
<>
<div className=" fixed shadow-md w-full top-0 left-0 ">
<div className=" lg:flex items-center bg-black py-4 md:justify-around">
<div className=" flex justify-between px-3 pt-2 text-white cursor-pointer font-[Poppins]">
audiophile
<div onClick={change} className=" lg:hidden w-9 inline-block">
{
open
? (<span className=""><AiOutlineCloseCircle/></span>)
: (<span className=""><TfiMenu/></span>)
}
</div>
</div>
<ul className={`lg:flex md:items-center ${open ?"" :"hidden"} `}>
{ Links.map((link) => (
<li className=' md:ml-8 text-xl md:my-0 my-7'>
<a href={link.link} className='text-white hover:text-yellow-500 duration-500'>{link.name}</a>
</li>
))}
</ul>
<div className>
<img className="absolute right-20 md:inline-block w-7 cursor- top-5 " src={cart} alt="cart" />
</div>
</div>
</div>
</>
);
}
this is my code and whenever I try to load the home top portion is always under the navbar. .my navbar is positioned sticky. also can't make my home width to 100. maybe because it is under another component. to render it properly i am using margin-top (mt-44) or else its under navabr Any help will be really appreciated.

Answer 1

you should move your container one level up and move your navbar out of it like this:
import Home from './components/Home/Home.jsx'
import Earphones from './components/Earphones/Earphones'
import Navbar from './components/Navbar/Navbar'
import {BrowserRouter,Routes,Route} from "react-router-dom"
export default function App()
{
return(
<div className="container">
<Navbar/>
<BrowserRouter>
<div className="anothercontainer">
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
</div>
</div>
)
}