Order summary component

HTML:

• <main> should not be wrapped in a <div>, and you can remove #container.

• Use classes instead of IDs.

• The image is decorative, meaning the alt text should be empty: alt="".

• "Change" and "Proceed to payment" are links, as they would navigate to another page. "Cancel Order" triggers an action, hence it is a <button>.

CSS:

• It's good practice to include a CSS Reset at the top.

• Move the properties you had on #container to the body, and change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• line-height must also never be in px.

• You don't need to set font-family on each element. Set it on body, and remove it elsewhere - the descendants of body will inherit the value.

• Likewise, set text-align: center on the body, and remove it elsewhere.

• Except for on the icon, remove all fixed widths and heights.

• Make sure to give the "Proceed to payment" link a display: inline-block and width: 100%.

• Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.