Interactive Rating Component using React and Styled-Components

I have noticed that despite using the centering techniques for elements, I still didn't get the numbers inside list components exactly centered.

I used the flexbox for centering:

    display: flex;
    justify-content: center;
    align-items: center;

The same problem for the message that should tell the users what number they selected. They are a bit above the ideally centered line. Can someone explain to me what I did wrong?