React router 질문

안녕하십니까. 선생님
리액트 공부중에 질문이 있습니다.


보시는 것처럼 상세페이지와 메인페이지 css디자인을 부트스트랩을 사용하지 않고 직접 짜서 하고 있는데
크롬의 도구를 열어 찍어보면 메뉴바까지 선택이 되어집니다. Navbar를 포지션 fixed로 지정해놓았습니다. 이 상태에서 코드를 추가하여 
Navbar 아래에 넣는건 어떻게 해야합니까? 
코드 첨부해드립니다.

<div className='App'>

<NavbarMain></NavbarMain>

<Routes>
<Route path="/" element={
<>
<div className='main-bg'>
<div className='sub-bg' width='40%'></div>
</div>
<div>
<div className='image-container'>
{ shoes.map((a,i) => {
return (
<Card shoes={shoes[i]} i={i+1}></Card>
 )
})
}
</div>
</div>
</>
}/>
<Route path="/detail" element={
<DetailBox />
}
 
/>
</Routes>
 
</div>
 );
}

function Card(props) {
return(
<div className='image-box1'>
< img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'}></img>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content}</p>
<p>{props.shoes.price}</p>
</div>
 )
}

function NavbarMain() {
return(
<div>
<div className='Navbar'>
<div className='container'>
<div className='first'>Hoon's Mall</div>
<Link className="Link" to="/">Home</Link>
<Link className="Link" to="/detail">상세페이지</Link>
</div>
</div>
</div>
 )
}

function DetailBox() {
return(
<div>
<div className="detailContainer">
<div className="box1"></div>
<div className="image-box">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%;"></img>
</div>
<div className="box-detail">
<h4 className="name">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="button-detail">주문하기</button>
</div>
</div>
</div>
 )
}