@font-face { font-family: merriweather; src: url(/fonts/merriweather-regular.ttf); } body { margin: 0; font-family: merriweather, serif; min-height: 100vh; display: flex; flex-direction: column; } header { display: flex; align-items: center; justify-content: space-around; padding: 4em 0; img { max-height: 7em; } h1 { font-size: 2em; } nav ul { display: flex; list-style-type: none; padding: 0; li a { padding: .7em; border: 1px solid #000; margin: 0 .5em; text-decoration: none; color: #000; font-size: 1.2em; &:hover { color: #fff; background-color: #C61730; border: 1px solid #C61730; } } } } main { .hero { width: 100vw; position: relative; left: 50%; margin-left: -50vw; background-color: #C61730; color: #fff; padding: 4em 0; text-align: center; h1 { margin-bottom: 2em; font-size: 1.6em; } } } footer { background-color: #C61730; color: #fff; display: flex; justify-content: center; padding: 1em; margin-top: auto; p { border-left: 1px solid #fff; border-right: 1px solid #fff; text-align: center; display: inline-block; padding: .5em 2em; a { color: inherit; text-decoration: inherit; &:hover { text-decoration: underline; } } } } main, .wrap { max-width: 60em; margin: 0 auto; }