Order summary component css flexbox html

There is no need for <div class="card"> in the html file in the css replace the main with the body . body { display: flex; justify-content: center; align-items: center; background-image: url(./images/pattern-background-desktop.svg); } To center a content on a page, add min-height:100vh; to the body and remove the height value. Add background-repeat: no-repeat; background-size: contain and background-color value.

give the main a width value: main{width:400px;} Give .preview a padding instead of giving the main a height value.

In the media query give the main a width of 80%, there is no need to give the .preview a height value you can increase or decrease the padding value for .preview.

Hope am helpful HAPPY CODING