* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #c1eac1;
padding: 50px;
text-align: center;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
font-size: 24px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
.footer {
background-color: #c1eac1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
}