odin-default-css-exercises/flex/07-flex-layout-2/solution/solution.css

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;
}