Building a replica page but have issues with positioning and nesting of elements
I've attached the image I 'm trying to replicate, and here is my current progress: https://codepen.io/Laing91/pen/GRwyaMq
1) Is it going to be easier to include Announcements and Trending inside the grid container?
2) An issue I come across with my live version (codepen doesn't show this), is that the side navbar doesn't meet the end of the page, or it does if I increase the width of that nav to 30% or higher, but at 20% or less it seems to have a large amount of invisible left-padding. https://callum-laing.github.io/admin-dashboard/
3) I'm trying to figure out how to implement and position the top hero bar. I thought about creating a new container outside of the grid and trying to position it at the top of the page (flexbox maybe?), but in practise I couldn't get it to go where I wanted, and it kept overlapping the top of the side-navbar.
1) Is it going to be easier to include Announcements and Trending inside the grid container?
2) An issue I come across with my live version (codepen doesn't show this), is that the side navbar doesn't meet the end of the page, or it does if I increase the width of that nav to 30% or higher, but at 20% or less it seems to have a large amount of invisible left-padding. https://callum-laing.github.io/admin-dashboard/
3) I'm trying to figure out how to implement and position the top hero bar. I thought about creating a new container outside of the grid and trying to position it at the top of the page (flexbox maybe?), but in practise I couldn't get it to go where I wanted, and it kept overlapping the top of the side-navbar.

