Skip to content
Submitted over 2 years ago

Order Summary Component - Using HTML & CSS

Yu-An•70
@yuany2036
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I ran into a problem with flex box, and that is for the "Annual Plan" part of the website, I couldn't quite get it to align at flex-start, so I had to resort to using -margin to get it to move there, which seems less than ideal. Please let me know if you've spotted the problem, thanks!

Community feedback

  • Nakoya Wilson•1,530
    @nakoyawilsonPosted over 2 years ago

    Hey there! I took a look at your code. If by the "Annual Plan" part you're referring specifically to your .centerContent class where you use -85px margin to position it, I think the problem may be line 62 of your style.css file where you use justify-content: space-between which forces that div to the center. You could try removing justify-content: space-between so it defaults to flex-start and then setting a specific margin-left value for .centerContent and margin-left: auto for the Change button.

    0

Please log in to post a comment

Log in with GitHub

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