For the circle I had to do margin-left: 3rem; to get the circle centered.
The complete code for the circle is circle { width: 9rem; height: 9rem; display: flex; margin-left: 3rem; text-align: center; justify-content:center; align-items: center; border-radius: 50%; font-size: 30px; color: #fff; line-height: .5rem; background-color: hsla(241, 81%, 54%, 0.427); }
Why did it not center without the margin-left?
Hey - looking good! You can center everything in your 'left-side' div instead of adding a margin-left to try achieve the same effect. Try either display: grid; place-items: center; OR display: flex; align-items: center; justify-content: center;. Personally, i like to use display: grid; place-items: center; to center things inside divs as its shorter to write.
Happy coding! :)
Hey. Looking good! Just a few points I noticed: I would suggest building your design out in the responsive mode of the Dev Tools of Chrome/Firefox to get the most accuracy. This desktop design is designed at 1440px wide so that would be a good starting point when beginning to build out your project. Also, this type of layout is ideal for using CSS grid. I'd highly recommend using it for this project.
Happy Coding :)
