html, body { margin: 0; padding: 0; } body { display: flex; flex-direction: column; min-height: 100vh; align-items: center; } .page-wrapper { display: flex; flex-direction: column; max-width: 60ch; width: 60ch; margin: 0 auto; padding: 1em; border: 2px solid white; border-radius: 1em; } header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } header aside { display: flex; flex-direction: column; max-width: 50%; } main { flex: 1; } footer { margin-top: 1em; text-align: center; } .hero-image { height: 10rem; border-radius: 6px; } section + section { margin-top: 0.5em; } h1, h2, h3 { margin: 0; margin-bottom: 1em; } p { margin: 0.5em 0; } .webring-container { margin-top: 1em; width: calc(60ch + 2em); }