React-router-dom : Background-image pushed down

Hello, I’m building a website to practice what i learned on my Fullstack course.

Using the react framework, i set a background-image on my hero section. It was perfectly displayed, as expected until i introduced react-router-dom for the routing. The header pushed the background-image underneath it leaving a huge white space unoccupied. I searched for the solution to this problem but i found none.

Capture d’écran 2023-10-11 à 15.56.33
Capture d’écran 2023-10-11 à 15.55.51

I began by creating the HeroSection component :

which i then imported in the Home component :

I created the Root component to begin the routing :
Capture d’écran 2023-10-11 à 16.25.05

And began the routing for my pages :

And here’s the result :


Have you published the website online??, I would like to take a look at the elements and the css code myself and we can figure this out! If you have not maybe use github to publish it, in the meantime, I will have to look at the code.

the website is yet to be published. i’m still working on it.

Ok thats cool! Uhmmm if you are still having an issue, what comes up when you are inspecting it using devtools? maybe that could help. use both chromeDevTools and react dev tools to inspect your project and maybe send a screenshot of what comes up. right now it could be a css issue or maybe the routing, im not sure, but try it and see!