Help with css grid

I learned bootstrap earlier this year but have tried to transition into using css grid. I’ve been messing around with this page for a couple hours and cant seem to get it to work the way I want it to. I want the navbar to be fixed on the left and the grid to be to the right with all the content. I’ve kind of got it to work but how can I make it work better or to be more visually appealing? The way it’s set up now, is there is one huge div that uses flexbox surrounding all the elements and within the flexbox there are 2 grids; one for the navbar and one for the main content. if there is an easier way to do this please let me know. I just feel like everything is surrounded by so many divs

I messed with it for a little bit and I think I found the problem. you need to change
position: right;}

Its currently in Fixed position which causes it to overlap. I would add a border to your nav bar as well to add to it.

But then again…that makes it so it does not stay on the side at all times.

1 Like

I appreciate the help. I like the border suggestion and have implemented it, however I want the navbar to stick even when scrolling through the page.

Nice! Looks better already.

1 Like