Why did we use max-height property in our second @media query rule instead of just using height property?

The "max-height" property establishes an upper limit, but the based on the contents the item can contract to a smaller size.

On the other hand "height" establishes both a limit and a desired size, so the item will take up that much space even if the contents do not require it.

So first, the height of an element is determined on the size of the children inside it and their padding properties etc. Unless you define the exact height of the element, the default height will just be however much space the stuff inside takes up.

In the previous non-media query code, he wrote the code according to how the page looks like on a normal computer/laptop screen. And in this case he locked the height at a specific value (850px) using the height property. The normal height property locks the height at exactly the value given, regardless of the device screen size.

In the second media query for devices with a max-width of 786px he used the max-height property because he doesn't want to lock the height of the main-header to a specific height, but rather he wants it to be whatever its default size is only until the main-header reaches a height of 380px. The max-height property in the media query overrides the height property value from earlier.

If he didn't put a max-height in the his media query, then the main-header's height would be assigned to 850px on all device sizes, which takes up way too much space on smaller devices and wouldn't look too great.