Build a Page of Playing Cards - Build a Page of Playing Cards

Curriculum Help
,
1

Tell us what’s happening:

Hello, i need help with step 4. Each of your .card elements should have exactly three div elements as children. And also how can i align 5 hearts(middle) like in the example.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link rel="stylesheet"href="styles.css">

</head>

<body>
  <main id="playing-cards">
    <div class="card">
      <div class="left">
        <div>A</div>
        <div>♠</div>
      </div>
      <div class="middle">
        <div>♠</div>
      </div>
      <div class="right">
        <div>♠</div>
        <div>A</div>
      </div>
    </div>
    <div class="card">
      <div class="left">
        <div>2</div>
        <div>♣</div>
      </div>
      <div class="middle">
        <div>♣</div>
        <div>♣</div>
      </div>
      <div class="right">
        <div>♣</div>
        <div>2</div>
      </div>
    </div>
    <div class="card red">
      <div class="left">
        <div>5</div>
        <div>♥</div>
      </div>
      <div class="middle">
        <div>♥</div>
        <div>♥</div>
        <div>♥</div>
        <div>♥</div>
        <div>♥</div>
      </div>
      <div class="right">
        <div>♥</div>
        <div>5</div>
      </div>
    <div>        
  </main>

</body>

</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

#playing-cards {
 display: flex;
 justify-content:center;
 flex-wrap: wrap;
 gap: 20px;
}

.card {
  width: 250px;
  height: 350px;
  font-size: 40px;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  box-shadow: 5px 5px 5px grey;
}

.left {
  align-self: flex-start;
}

.middle {
  align-self: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.right {
 align-self: flex-end;
}

.red {
  color: red;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards
https://www.freecodecamp.org/learn/full-stack-developer/lab-page-of-playing-cards/build-a-page-of-playing-cards

2

this may be an issue, do you think you should end an element with an opening tag?

3

Thank you. I checked multiple times even then i couldn’t find this mistake.