00:00 The reason the logo is flush to the top here is from a legacy class that we had for our flex container. We had items start and in grid here item start is going to make the element line up to the top of the cell. Here's what I mean here we had said excel item start and the reason we

00:16 had done this is because we had the text center aligned with item center on smaller screens and then we wanted to left align it with item start. But now that we've switched to a grid and we control the placements differently we actually want to remove that class so I will delete that

00:33 and you can see that now the logo sits perfectly centered within the cell which is what we want. Now why is this not center aligned and the reason is we had some margin top applied to it as you can see here and the same happens with the paragraph we were controlling the spacing

00:48 with margins and so we need to get rid of these margins now. So I remove that and on the h1 tag here we have margin top 6 and we want at the excel breakpoint to remove it with margin top

01:03 0. Look at this now it's perfectly centered and we'll do the same for the paragraph tag empty 4 empty 6 and then excel empty 0 and with that our subgrid section is finished and looks perfect.

01:19 Let's remove the grid lines and funnily enough it almost looks better with the grid lines on because it reinforces the fact that things are perfectly aligned. So I feel like one of these fancy mesh grid lines pattern background effect here would look really nice. You know what I'm talking about I think having a few lines that can reinforce the fact that things are aligned

01:39 perfectly would look superb on this design. Anyway I'm rambling now I hope you enjoyed this segment and you've learned a thing or two. Congratulations you've done great!