Codepen.io code different of the zip export

When i have to use it:

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  @media (max-width: 600px) {
    flex-wrap: wrap;
  }
}

Instead of it?

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

(differences in how to edit the css of @media and child elements)

The first code is from freecodecamp product landing page (codepen), and the second code is an excerpt of what I exported from freecodecamp pen, why are they different?
Why does the first mode only work in codepen? (I manually copied it to an html file and it did not work)
Another example of the difference:

#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  
  iframe {
    max-width: 560px;
    width: 100%;
  }
}
#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
#how-it-works iframe {
  max-width: 560px;
  width: 100%;
}