Order Summary CSS Grid

wrap <div class="attribution"> within the footer tag to fix the accessibility issue.

To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .card on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .card on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi, @saykate.

It's a really good and clean solution. You solved the flow problem with use block elements. And you have a 4 column grid to separate the last of them, I think it's a smart move:) I spent a lot of time trying to find an ideal grid layout. But 4 column, it's so clear...

• You can use BEM notation to give your class names. I've same problem because I use lots of nested structures. You can check this for another clear solution and rename your class name with BEM notation Rostyslav Nazarenko's solution.

• And you can check BEM notation here. Offical Website the BEM Notation

I hope these'll help you to improve your perspective. Keep coding. All the best.