body, html { height: 100%; margin: 0; } .container { text-align: center; height: 100%; padding: 16px; box-sizing: border-box; } .container div { padding: 15px; font-size: 32px; font-family: Helvetica; font-weight: bold; color: white; border-radius: 15px; } .header { background-color: #FFDE22; } .sidebar { background-color: #FF7755; } .nav { background-color: #00DDFF; } .article { background-color: #bccbde; } .article p { font-size: 18px; font-family: sans-serif; color: white; text-align: left; } .footer { background-color: #393f4d; } /* SOLUTION */ .container { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 80px 80px 1fr 80px; gap: 16px; } .header { grid-column: 1 / 3; } .sidebar { grid-row: 2 / 4; } .footer { grid-column: 1 / 3; }