Why flex container width becomes smaller when clicking from file manager?

I was making the "our team " section of a website. I checked my progress via “visual studio code live server extension”.Everything worked properly. After closing vs code, I clicked the HTML file from file explorer and it opened in google chrome. Then the flexbox container and flex items became small. Why different result shows when I see the webpage from file explorer and when I see from vs code live server.My project code in Gist

server extension

No need to add specific width to .card-container

Remove “width” and add .card-container{flex:1;} after margin

Screenshot 2020-05-22 at 1.50.19 AM

Screenshot 2020-05-22 at 1.51.12 AM