Order Summary Card Made in CSS Grid

Hello Zach! Good job finishing the challenge, congratulations !

• Centering things sometimes can get tricky and a lot of challenges here requires the component to be in the center of the screen, using position: absolute in this case seems to not be a bad option since your component will stay responsive anyway, but for future cases, you can remove the position and center the content with flex in the body like this:

body {
    display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}

Also consider using main tags, you are using a div with sections inside, for this little project doesn't matter that much but you could have use a main tag instead of a div!

Hope my feedback helps you for future projects!

Hi, Zach James! 👋

Congratulations on finishing this challenge! 🎉

I would recommend using flexbox or grid to position the card in the middle of the page. You can use the body element as the container of the card. Also, you need to set min-height: 100vh to make the card vertically center. With min-height: 100vh, the body element is still allowed to grow if ever needed.

Absolute positioning can potentially introduce an overflow bug. Not only that, now we have flexbox and grid which is the modern way to deal with this. So, that's why I suggest using either flexbox or grid.

Some more suggestions from me.

• I suggest selecting the element in the CSS with its class name only. There's no need to increase the specificity by chaining the element. Also, it's best to use single class selectors for styling whenever possible
• I don't think you need to wrap the button elements with form element since there's nothing to be submitted. So, I recommend using div instead.

That's it! I hope this helps!