Interactive rating component page with HTML, CSS and JS

I struggled a long time with making it responsive, especially the main section (Everything inside of it seems to be quite responsive). For some reason, even when I set both the max-width and width like below, there is no margin when in mobile view. I tried to set the width to a percentage number as well, but still there is no margin.

main{
    max-width: 350px;
    width: 85vw;
}

Furthermore, I sometimes see scrollbars even when in a larger width (800px for instance). Although everything fits, I'm not sure where did that come from.

Another question I had is that I can't seem to align the < p> elements horizontally. They always seems to be a litter higher than they should, so I ended up adding some padding on top to make it look like it's in the center. I'm not sure if there's a way to clear all spacing around the elements so it could be at the absolute center of its parent.

I can't wait to see how everyone else tackled this project and I would love to see some feedback on that, thank you everyone in advance!