Order Summary Component

👾Hello @chigyong, congratulations for your new solution!

🎯 Your solution its almost done and I’ve some tips to help you to improve it:

1.Align the pricing section vertically with align-items: center; and justify-items: center;

.box .content .annual-plan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: hsl(225deg, 100%, 98%);
    margin: 15px 0px 10px 0px;
    padding: 10px 10px 10px 10px;
    align-items: center;
    justify-items: center;
}

2.Your component is perfect, but its not responsive yet. To fix this behavior all you need to do is replace the width with max-width. Note that the difference between these two properties is that width is fixed, example, width: 340px is an container that doesn't get bigger or smaller than 340px but max-width: 320px have the maximum of 340px and can contract when the screen scales down and adjust its size.

✌️ I hope this helps you and happy coding!

HI @chigyong,

Good job on completing the challenge, just a few suggestions.

Remove the margin on the .box I see you're using the margin to center the card use the following.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Also with heading you're missing a h1 tag which is really important always start at the h1 even if there's just heading on the page start from the h1 and work you're down to the h6. The report above hold valuable missing so fix those issues as well.

On the annual-plan div you used grid that's great just to spacing is a bit off.

.box .content .annual-plan {
    grid-template-columns: 1fr 3fr 1fr;
    align-items: center;
}

the above will create a similar layout to that in the design, it basically just says make the middle column bigger that the others

Overall you did really well.

center the div using min-height: 100vh; on body tag and use flex property with justify-content: center; and align-items: center;