Responsive Summary Page with Bootstrap

To make two elements look like they're on top of each other, you can do this: make the right card go a bit to the left (as if it's hiding) by using a negative margin on its left side, and also make it stay behind the other card by using a special layering property called z-index with a value of -1. This way, the right card will seem like it's under the result card.

I noticed that the summary page isn't exactly in the middle. To fix that, you can wrap the entire card in a "main" container. Then, use this bit of CSS code for the "main" container:

Copy code
main {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

This will help center the summary page nicely on the screen.