Understanding Example of Evenly Placing Elements Horizontally

I've recently started learning CSS, and while reading code in W3Schools, came across this example:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_calendar

To equally distribute the elements horizontally, the first operation I can think of is width: calc(100% / no_of_elements)

However, the different values used for different media queries for the width key is not given by that formula. How should one derive something like that?

Also, since % is relative, why do we have to change the width percents wrt the screen size? If the screen shrinks, shouldn't the percent value shrink in the same proportion?