.header{background-color:#666;padding:30px;text-align:center;font-size:35px;color:#fff}.header h2{font-size:50px;font-family:Arial,Helvetica,sans-serif;font-weight:700}.nav{float:left;width:25%;height:300px;background:#ccc;padding:20px}.nav ul{list-style-type:none;padding:0}.nav ul a{text-decoration:underline!important;box-shadow:none!important;color:#00f}.article{float:left;padding:20px;width:75%;background-color:#f1f1f1;color:#000;height:300px}.section:after{content:"";display:table;clear:both}.footer{background-color:#777;padding:10px;text-align:center;color:#fff}@media (max-width: 600px){.nav,.article{width:100%;height:auto}.header{font-size:25px}}.header2{background-color:#666;padding:30px;text-align:center;font-size:35px;color:#fff}.header2 h2{font-size:50px;font-family:Arial,Helvetica,sans-serif;font-weight:700}.section2{display:-webkit-flex;display:flex}.nav2{-webkit-flex:1;-ms-flex:1;flex:1;background:#ccc;padding:20px}.nav2 ul{list-style-type:none;padding:0}.nav2 ul a{text-decoration:underline!important;box-shadow:none!important;color:#00f}.article2{-webkit-flex:3;-ms-flex:3;flex:3;background-color:#f1f1f1;color:#000;padding:10px}.footer2{background-color:#777;padding:10px;text-align:center;color:#fff}@media (max-width: 600px){.section2{-webkit-flex-direction:column;flex-direction:column}}