Interactive Rating Component (HTML, CSS and JavaScript)

Well done on completing the challenge.

Concerning centering divs, you can use a few different methods. The first one is to set the margins to auto, the second method requires setting the display property to 'grid' and then setting 'place-content' to 'center'. The third method requires setting the display property to 'flex' and then setting the 'justify-content' and 'align-items' property to center. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Concerning your other question, querySelectorAll returns a nodeList. So you can either use a for loop or you can use the index (first one is 0) to select individual items in it. You can find more information here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

I remember i struggling a little bit too for this and i find out about inline-block, padding inline. About JS i find a easy way to write my code. I declare a variable without any value and i made a for each with 2 properties and i count+ the variable in this function. You can see my code here and maybe it will help you to understand. https://github.com/CreolaTudorache/rating-card-js/blob/master/index.js