CSS Grid: Use Media Queries to Create Responsive Layouts Problem

HTML-CSS
1

Tell us what’s happening:
After watching a video on it twice and reading through the forums, I think I understand the concept. However, it seems to me to have a glitch in the web page. I change it time and time again to what several other sources says is the right answer and it still says it’s wrong.

@media (min-width: 400px){
.container{
grid-template-areas:
/* Only change code below this line /
“header header”
“advert content”
“footer footer”;
/ Only change code above this line */
}
}

The challenge wants you to make sure that the header takes the top of the container, the advert is on the left, the content is on the right, and the footer runs along the bottom when the grid is viewed in a window larger than 400px. To the best of my knowledge, I’ve done this, what am I doing wrong?

Thank you for the help! I don’t want a simple glitch to keep me from using such a valuable resource.

Your code so far


<style>
.item1 {
  background: LightSkyBlue;
  grid-area: header;
}

.item2 {
  background: LightSalmon;
  grid-area: advert;
}

.item3 {
  background: PaleTurquoise;
  grid-area: content;
}

.item4 {
  background: lightpink;
  grid-area: footer;
}

.container {
  font-size: 1.5em;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto 1fr auto;
  grid-gap: 10px;
  grid-template-areas:
    "header"
    "advert"
    "content"
    "footer";
}

@media (min-width: 300px){
  .container{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
}

@media (min-width: 400px){
  .container{
    grid-template-areas:
    /* Only change code below this line */
      "header header"
      "advert content"
      "footer footer";
    /* Only change code above this line */
  }
}
</style>

<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36.

Challenge: Use Media Queries to Create Responsive Layouts

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts

2

I’ve been working at it for an hour, but I found where it says in a forum that it’s a well known glitch in the curriculum and the first comment must be deleted to run the code!