Expense Chart Solution, using vanilla js, not even using jquery

Hey Louis, congratulations on completing this challenge! Your solution looks pretty neat. To address your question, you could add the following properties to your body element!

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

That should center your card component vertically! 😁

Here's a few other pointers:

• In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
• You might not want to use <p> as the child element of your <span> tag but the reverse is true, I think you should consider using <p> Your text <span> your special text </span> more text </p> this is becaue a <span> is an inline element as opposed to a <p> which is block level element. This will also fix most of your HTML validation issues.

Happy coding and keep up the great work👍