* { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ header { background-color: #0099ff; padding: 50px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 500px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #0099ff; padding: 40px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } }