html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 1. Header and footer to a width of 100% and height of 50px with fixed position*/
header,
footer {
  background-color: #333333;
  color: #ffffff;
}

/* 2. Set the header to top value of 0 */

/* 3. Set the footer to the bottom  */

/* 4. Style the main element as: 
    Display to flex
    The elements to wrap
    padding to 50px for top and bottom and 0 for rest
*/
main {
  background-color: #ffffff;
  overflow: auto; /* enable scrolling for main section */
}

main > div {
  flex: 1; /* make columns equal width */
}

/* 5. Fix the width of middle column to 300px using the `flex` shorthand */