Order Summary solution with Flexbox

Community feedback

• 

  Francesco Vetere•90

  @francescoveterePosted about 2 years ago

  Hi Fatima! First of all, good job! I think the overall result is really nice and your use of flexbox is correct in my opinion :)

  For the .option div being too wide, I think the problem would be easily solved by adding this simple rule to your CSS:

  *, *::before, *::after { box-sizing: border-box; }

  This is a very very useful rule, almost a "must-have" in all of your projects, and it basically ensures that padding and border are always included in an element's total width and height. That's because by default, in the CSS box model, width and height of an element are only applied to the content box, and thus any padding or border is not considered in the value that you assign to the width or the height. You can explore more about this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  Adding this rule, and removing your "max-height: 45px" on the .option element should fix the alignment problem :)

  Marked as helpful

  1