Result-Summary-Component-main

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion:

• Since you set grid to the body, but you didn't set the size of the rows, your footer is pushing your card up a little bit. You can prevent that from happening adding this to the body:

grid-template-rows: 90% 1fr;

Then your card will always occupy 90% of the space and the footer will adapt in the remaining space.

Also, you mistyped min-height: 100vh, once you correct it, your card will be centered.

I hope it helps!

Other than that, you did an excellent job!

hi there! 👋

you applied justify-content: space-between to your .summary_item selector, which has only one direct child, so it can separate your elements. just apply width: 100%; and justify-content: space-between to your .flex_group selector. if you want to make your style more like the original, you need to separate your img and the h3 element from the paragraph:

<div class="flex_group">
  <div>
    <img/>
    <h3>
  </div>
  <p>
</div>

this way .flex_group will have 2 direct child, not three and it can span the two to the two side

Hope this was helpful 🙏

Good luck and happy coding! 🙌