Mobile responsive site using Flex & Grids! - Social Proof Section

My second challenge. With this challenge I think I understood really well how to use Flex & Grid models. Really usefull to design mobile responsive apps.

Nevertheless, I have some questions:

1. Initially, I’ve put the following properties to the .container and .container__ratings classes -> display: flex; flex-direction: column; align-items :center; justify-content: center; The effect of this was that the star ratings rectangles were limited to the width of the text (rated 5 stars…), and not to the width of the container (88% of 100%). That was not the intended effect, so I removed those properties, and I got the correct width. I don’t understand why adding flex properties to the above classes got me the wrong width. Any idea?

2. I got suggested in a previous challenge that my body code should start with a min-height: 100vh; I understand the theory, if I’m not using this line of code, a person viewing my page in a different device could not see the entire page. But, when I remove this line of code, and I try in different height sizes, all my page is shown correctly. Why is that?

Thanks in advance.

P.S: ignore the commens. Those are my findings during the challenge, and are in Spanish :P