i am unable to style a page using max-width media query

You have a missed close bracket on class .hide

This is the reason why nothing works after this class

.hide {
  display: none;
} /*<---- this is missing*/
  
@media (min-width: 800px) {
  .hero {
    flex-wrap: nowrap;
  }
}