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

HTML-CSS
1

Tell us what’s happening:

Please help!

Error Message:You should have a #playing-cards selector that sets its elements’ display to flex.

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="style.css">

</head>

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

</html>

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


#playing-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
flex-direction: row;
max-width: 600px;
margin: 0 auto;
padding: 30px 10px;
}

.card {
display: flex;
justify-content: space-between; 
width: 250px;
height: 350px;
border: 2px solid black;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}

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

.middle {
align-self: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

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

Your browser information:

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

Challenge Information:

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

2

are you sure about the css file?