* {box-sizing: border-box;}

    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    .wrapper > * {
        border: 2px solid #f08c00;
        padding: 5px;
    }

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    header ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    aside ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    user ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
.main-head {
  grid-area: header;
}
.main-user {
    grid-area: user;
}

.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}
.wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-areas: 
  "header"
   "user"
   "nav"
   "content"
   "sidebar"
   "ad"
   "footer";
}


@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "header  header"
        "user user"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
  header ul {
    display: flex;
    justify-content: space-between;
  }

  
}
@media (min-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  user"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"
   }
   nav ul {
     flex-direction: column;
   }
   header ul {
     flex-direction: row;
   }

}