Skip to content
Submitted over 3 years ago

Order Summary Solution Using HTML/CSS

Grsst31•30
@grsst31
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, I would like to know how I could have gotten the price box done correctly? I couldn't seem to move the text closer together and move it over to the side. I feel like there's a simple solution, but I may have been overthinking it, this is my first challenge.

Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Ankush Chauhan•40
    @Ankushch27

    Hi @grsst31, the reason for the text being so far apart inside the price box is due to the default margin/padding of the <h2> and <p> tags (every html element in general has some default margin/padding). A common practice to avoid these kinds of situation is to apply some reset style to the elements. In your case, it could be as follows:

    h2, p { margin: 0, padding: 0 }

    Or in general apply to every element:

    * { margin: 0, padding: 0 }

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord