css, html 5, css grid

Hey there Joshua Carter, congrats on completing the challenge 🎉🎉

I see that you've ran down to a lot of problems but it's easy to fix 👍

let's walk down through all of your problems together✌

#1 The component isn't at the middle of the page you can fix it by just giving the body a display of grid and place content of center and with a minimum height set to 100 view heights

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

#2 The result container which you have set the class of left side needs a gradient instead of a single color

.left-side {
background: linear-gradient(
 var(--Light-slate-blue-background),
 var(--Light-royal-blue-background));
}

#3 the 76 also needs to be updated the div with a class of circle

    background: 
linear-gradient(
 var(--Violet-blue-circle),
 var(--Persian-blue-circle));

#4 you should lower the opacity of the summary items like make the opacity 0.3 or 0.2 what you feel like better. 0.3 worked fined I think so I went with that one. Do it for all of the rows form one to four

.row-two {
    background-color: hsl(59, 70%, 86%, 0.3);

And don't use pixels for setting the font size height or width always use rems and don't use width auto on everything and yeah ✔✔

I hope it helped you a little Have a nice day :D

Hey joshua, So it looks like the area where your results are, the padding is all off. Looks like it's doing a stair step rather than being in line with consistent padding for all the results. Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.