* {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;
      display: flex;
      justify-content: space-between;
    }

    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;
        display: flex;
        justify-content: flex-end;
    }

.main-head {
    grid-area: header;
}
.main-user {
    grid-area: user;
    background: #ededed;
}

.content {
  grid-area: content;
}
.main-nav {
    grid-area: nav;
    background: #27aae1;
}
.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 (max-width: 449px) {
    nav a {
        font-size: 0px;
    }

    nav a i {
        font-size: 20px;
    }
}

@media (min-width: 450px) {
  .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 {
/*      flex-direction: row;*/
      display: flex;
      justify-content: space-between; 
  }

  
}



@media (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas: 
    "header header  header user"
        "nav nav nav nav"
      "sidebar    content content content"
      "sidebar    content content content"
      "ad footer  footer footer"
   }

  nav ul {
      flex-direction: row;
/*      display: flex;
      justify-content: space-between; */
  }

   header ul {
     flex-direction: row; 
   } 

}