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

Curriculum Help
1

Tell us what’s happening:

The check says my #playing-cards { display: flex; } rule is missing even though it’s already in my CSS. My HTML has and three .card elements, and the layout looks correct. I’ve rerun the tests and checked for typos, but the validator still flags this exact flexbox requirement. Could this be a test issue?

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>
</head>

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

</html>

/* file: styles.css */
#playing-cards { 
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  
}

.card {
  width: 50px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

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

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome back @myopicOracle,

Please don’t forget to link your stylesheet in your HTML.

Happy coding

3

Omg. Good catch, thank you so much!