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, 0.06); border-radius: 4px; } /* 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; box-sizing: border-box; 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; width: 300px; } .footer { display: flex; align-items: center; justify-content: center; }