Order Summary Component with HTML/CSS

Hi Jfkay531, good job :)

Try using Flexbox, it can help you better center elements on the page: give the flexbox and height properties to the body and remove all margin, padding and width from the .container class.

Read the guide -> Flexbox

Note: Flexbox aligns to the size of the parent container.

You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

In the end, to make it look as close to the design as possible, for fix the top background-image add the property background-size: contain;

I hope that helps ;)

Hmm.. you should probably start using flexbox, this is the perfect little course on Flexbox for you. Hope this will help solve this challenge as well. Just in case you know about flexbox but not comfortable applying try this cheatsheet on flexbox. Here is the another one Flexbox Froggy for practice.

I am sure they will help you apply those tiny changes required to make this design look good. Just apply flex box on the div with "plan" class (btw nav should not be used inside there ) and you are good to go.