Can someone explain to me why my HTML/CSS is not correct but very close ? The Odin Project Flexbox Layout 02 - html

Question

type herehtml, body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
display: flex;
padding: 0 16px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
align-items: center
;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
list-style: none;
padding: 16px;
font-size: 24px;
color:antiquewhite
display: flex;
background: royalblue;
display: flex;
height: 100vh;
width: 400px
flex-shrink: 0;
padding: 16px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
padding: 32px;
margin: 16px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
padding: 16px;
gap: 16px;
overflow: hidden;
height: max-content;
width:300px
}
.container {
display: flex;
gap: 16px;
padding: 32px;
display: flex;
flex-wrap: wrap
width: fit-content;
justify-content: center;
align-content: center;
}
.big {
display: flex;
flex: 1
}
a{
text-decoration: none;
color: white
}
.card{
height: 300px;
width:auto;
}
.big {
display: flex;
flex-direction: row;
}
ul{
list-style: none;
}
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="big">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽‍♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
I got it to look very close but there are a lot of little things that look off. The sidebar text is too tight and my cards are too tall and not laid out properly.
I was instructed to use flex-wrap for the cards but that changes nothing, I struggled enough just to get the 'Holy Grail Layout' itself.
I've looked at the available solution and it is not described.

Answer 1

You left only Semicolon in css I have commented Where you left semicolon.
This is your solved code.
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
display: flex;
padding: 0 16px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
align-items: center
;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
justify-content: center;
align-items: center;
}
.sidebar {
width: 300px;
list-style: none;
padding: 16px;
font-size: 24px;
color:antiquewhite;/* here you leave semicolon*/
display: flex;
background: royalblue;
display: flex;
height: 100vh;
width: 400px;/* here you leave semicolon*/
flex-shrink: 0;
padding: 16px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
padding: 32px;
margin: 16px;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
padding: 16px;
gap: 16px;
overflow: hidden;
height: max-content;
width:300px
}
.container {
display: flex;
gap: 16px;
padding: 32px;
display: flex;
flex-wrap: wrap;/* here you leave semicolon*/
width: fit-content;
justify-content: center;
align-content: center;
}
.big {
display: flex;
flex: 1
}
a{
text-decoration: none;
color: white
}
.card{
height: 300px;
width:auto;
}
.big {
display: flex;
flex-direction: row;
}
ul{
list-style: none;
}
</style>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="big">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽‍♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>