.wrapper {
  width: 880px;
  height: 660px;
  padding: 10px;
  background-color: #eee;
}

.gi {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: blue;
  display: inline-block;
  float: left;
}

.gi:hover{
    background: yellow;
    border-radius: 50%;
}


  /* style the grid items */
  /* make the width and height 200px */
  /* make the margin 10px on all sides */
  /* add some background color, or a background image if you are feeling fancy */
  /* how can you get the elements be side by side with each other? hint in line with each other */
  /* float the grid items to the left */
}


/*when you hover over the elements, make them change color*/


/*BONUS! make the first grid element a perfect circle without touching the html!*/