Order-summary CSS

Hello Lea, I saw your code for this challenge. I think you need to define Height to the body element. And position: absolute to .attribution class (if you want it to be included in browser, other wise remove the - div class attribution - from html and css).

You can try these changes,

body {
     height: 100vh; /*----------------------> Add height 100% of Viewport---*/
     font-size: 16px;
     display: grid;
     place-items: center;
     font-family: 'Red Hat Display', sans-serif;
     color: var(--Dark-blue);
     background: url(images/pattern-background-desktop.svg) no-repeat;
     background-color: var(--Pale-blue);
     background-size: contain;
 }

.attribution {
     margin-top: 2rem; /*----------> can remove, not needed ---*/
     color: var(--Desaturated-blue);
     position: absolute; /*-----------------------> Add Position - Absolute ---*/
     bottom: 0; /*-----------------------> Will make sure attribution stay at the bottom ---*/
     height: 40px;
 }

I think these changes will center the card to the browser-viewport. Thank you and have a good day.

Hello Lea, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

A good practice to center content is using grid or flex-box, avoid using margin or padding to make placements, use only in the latter case! we can do it like this:

Flex-box:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min height: 100vh;
}

GRID

body {
    display: grid;
    min height: 100vh;
    place-content: center;
}

To improve the code structure wrap this div:

<div class="attribution">

with the semantic tag footer

The remainder is excellent.

I hope it's useful. 👍