Colin's Order-Summary-Component

Hey,

First of all, it looks great. I'm glad to hear you got some useful feedback and was able to tackle this challenge more easily! Some general tips - for this challenge and for the future ones:

There is a very easy way to place everything in the center - even vertically:

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

Or you can do the same with grid and place-items center, as you prefer. Giving the body a min-height will make sure your card is centered vertically. This way you won't need to rely on %-s for margins. Defining margins with % isn't super reliable anyway, you'd do better with em, rem.

Getting units right: so apart from margins, generally it's best to use rem when you're uncertain what units you should use - like your card width (where you now use px). Px values shouldn't be used widely, apart from setting smaller things, like a border-radius or box-shadow.

Alt texts: really nice to see you paid attention to this. Just a note: for decorative images, you can leave alts blank - like the music icon here.

Semantic stuff: make sure to wrap everything in a main tag. Of course you can have other landmark elements, like header, footer, etc in your websites, but there very least you should use a main.

All in all, really well done!