Learn Responsive Web Design by Building a Piano - Step 6

Tell us what’s happening:
Describe your issue in detail here.
I am not sure what I am doing wrong

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Piano</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="piano">
    <div class="keys">
      <div class="key"></div>
      <div class"first class second class"</div>
      <div class=" black--key"></div>
      <div class=" black--key"></div>
      <div class=" black--key"></div>
      <div class=" black--key"></div>
      <div class=" black--key"></div>
      <div class=" black--key"></div>
    </div>
  </div>
</body>
</html>
/* file: styles.css */

  **Your browser information:**

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

Challenge: Learn Responsive Web Design by Building a Piano - Step 6

Link to the challenge:

you’ll add a second class value of black--key. Add this to your second, third, fifth, sixth, and seventh .key elements.

You should not remove any classes from any of the keys. You should add an additional class to only the second, third, fifth, sixth, and seventh keys.