/* main.css */

.container {
  background: #eee;
  overflow: auto;
}

.container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

/* TODO 3 - style the page */

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}


/* TODO 5.2 - use flexbox */

/* TODO 5.4 - use media query with Flexbox*/

/* main.css */

/*
.container {
  background: #eee;
  overflow: auto;
}

.container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

/* TODO 3 - style the page

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}
*/

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}





/* TODO 5.4 - use media query with Flexbox*/

Replace column CSS with flexbox styling
Replace column CSS with flexbox styling
