body {
  background:#FED02C;
  padding:100px'
}

.item {
  width: 100%;
  height:5vh;
  background:#cc9922;
  float:left;
  margin-bottom:1%;

}



@media screen and (min-width:1000px) {
    .item {
    width: 49.5%;
    height:8vh;
   
    float:left;
    margin-bottom:1%;
  }
    .item:nth-child(1n) {
    margin-right:1%;
  }
      .item:nth-child(2n) {
    margin-right:0;
  }
}

@media screen and (min-width:1100px) {
    .item {
    width: 32%;
    height:10vh;
   
    float:left;
    margin-bottom:1%;
  }

        .item:nth-child(2n) {
    margin-right:1%;
  }

     .item:nth-child(3n) {
    margin-right:0;
  }
}


@media screen and (min-width:1150px) {
    .item {
    width: 24%;
    height:12vh;
   
    float:left;
    margin-bottom:1%;
  }

        .item:nth-child(2n) {
    margin-right:1%;
  }

     .item:nth-child(3n) {
    margin-right:1%;
  }
       .item:nth-child(4n) {
    margin-right:0;
  }
}


@media screen and (min-width:1200px) {
    .item {
    width: 15%;
    height:15vh;
   
    float:left;
    margin-bottom:1%;
  }

        .item:nth-child(2n) {
    margin-right:1%;
  }

     .item:nth-child(3n) {
    margin-right:1%;
  }
  
       .item:nth-child(4n) {
    margin-right:1%;
  }
       .item:nth-child(6n) {
    margin-right:0;
  }
}
.container {
  max-width:600px;
  width:50%;
  margin:200px auto;
    -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}