body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; } .header { height: 72px; background: darkmagenta; color: white; } .footer { height: 72px; background: #eee; color: darkmagenta; } .sidebar { width: 300px; background: royalblue; } .card { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0,0,0,.06); border-radius: 4px; width: 300px; } /* SOLUTION */ body { display: flex; flex-direction: column; } .header { display: flex; align-items: center; padding: 0 16px; font-size: 32px; font-weight: 900; } .body { flex: 1; display: flex; } .sidebar { flex-shrink: 0; padding: 16px; } ul { list-style-type: none; margin: 0; padding: 0; } li { margin-bottom: 16px; } a { color: white; text-decoration: none; font-size: 24px; } .container { padding: 32px; display: flex; flex-wrap: wrap; } .card { padding: 16px; margin: 16px; } .footer { display: flex; align-items: center; justify-content: center; }