Order summary component (HTML and CSS)

Good work on this challenge! You've done well with the styling and layout of the card.

I noticed that you set the min-width of the body element to 100vw.

This is unnecessary, and you can remove this line of code without affecting the layout of the page as the body element is set to the full width of the screen by default.

I also noticed that the background image does not span the full width of the page.

You can fix this issue by simply adding background-size: 100% to the body element.

I saw that, in your comment, you said that, if you open the website, then the 'Annual Plan' new line problem doesn't appear.

However, when I open the site, it's still there for me on the desktop version of the site, although this issue seems to disappear on the mobile version.

This is happening because you've given the 'Change' button a margin-left of 10rem.

You can fix this by adding these styles to your page:

.card-order--billing {
  width: 100%;
}

.card-order--change {
  margin-left: auto;
}

width: 100% makes the box take up the entire width of the card minus the padding, while margin-left: auto pushes the 'Change' button as far right as possible.

You'll find that if you only use margin-left: auto without setting the width of the box first, it doesn't work.

This is because a width and display: block both need to be specified in order for an auto margin to work.

Finally, by setting the height to 100vh on the body element, you've made it so that the page doesn't allow for scrolling even when the content doesn't fit in the viewport.

You can fix this issue by changing height to min-height:

body {
  height: 100vh; ❌
  min-height: 100vh;
}

Other than that, this is a great solution, and well done once again for completing this challenge!

I hope this has been helpful, and good luck with your future projects! :)

I don't know why but the screenshot above messed the "Annual plan" (created a new line). But if you open the live URL, it does not.