styles.css

div{
  font-family: Arial, Helvetica, sans-serif;
  /*margin:10px;*/
}

h1{
  font-family: Lobster, cursive;
}

p{
  font-family: Arial, Helvetica, sans-serif;
}

h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
}

div.header{
  padding: 20px;
  text-align: center;
}

.grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
  /*justify-content: end;*/
  background-color: #7B15FF;
  border: 10px solid #7B15FF;
  margin-left: -8px;
  margin-right: -8px;

}

.grid-item{
  font-size: 20px;
  border: 1px solid rgba(0, 0, 0);
  padding: 20px;
  text-align: center;
  background-color: #E5D1FF;
}

.grid-container1{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  background-color: #7B15FF;
  border: 10px solid #7B15FF;
  margin-left: -8px;
  margin-right: -8px;

}

.grid-item1{
  font-size: 20px;
  border: 1px solid rgba(0, 0, 0);
  padding: 20px;
  text-align: center;
  background-color: #FFFFFF;
  /*grid-column: 1 / 5;*/
  grid-area: 1 / 2 / 5 / 6;
}
/**/

.flex-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: center;*/
  background-color: #FF1E7F;
  border: 10px solid #FF1E7F;
  margin-left: -8px;
  margin-right: -8px;
}

.flex-item{
  flex-basis: 120px;
  font-size: 20px;
  border: 1px solid rgba(0, 0, 0);
  padding: 20px;
  text-align: center;
  background-color: #FFE3EF;
}

@media only screen and (max-width:600px) {
  .grid-container{
    grid-template-columns: auto;
  }

  .grid-container1{
    display: grid;
    grid-template-columns: auto;
  }

  .grid-item1{
    grid-column: 1 / 1;
  }

  .flex-container{
    flex-direction: column;
  }

  .flex-item{
    flex-basis: 100%;
  }
}