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?