Responsive Order Summary Component

Set prop 'height' with value '100vh' to the classname '.main' in your 'style.css' file. Check below: .main { height: 100vh; display: flex; justify-content: center; align-items: center; }

So flexbox will allign all content vertically. This should help.

Hi Natalie! Your site looks great! Wih regards to your question on centering the component, there are several reasons it is not centered. The biggest reason being that your footer is interfering with the centering and the main box doesn't cover the entirety of the page. So when you use flexbox in your main to center it, it doesn't appear centered on the screen.

What I suggest you to do is make your footer position: absolute and bottom: 8px. That way it largely stays out of your way when trying to layout your things on screen. Next want to do is make sure you <main> takes up the entire size of the screen, so use:

main{
   width: 100vw;
   height: 100vh;
}

Combining that with the css you already have with your flexbox layout for <main> should solve the issue.

Hope this helps 👍