Code Working for some but not all

Tell us what’s happening:
Describe your issue in detail here.
For this code I should be able to just copy paste the code in the correct spot, but for some reason the code is only working for the second .key and not the third. I’m supposed to be adding a second class to the element.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<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="black--key, key"></div>
      <div class="black--key, key"></div>
      <div class="key"></div>
      <div class="black--key, key"></div>
      <div class="black--key, key"></div>
      <div class="black--key, 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/100.0.4896.127 Safari/537.36

Challenge: Step 6

Link to the challenge:

I know it seems like it since we usually separate items in a list by commas, but for the class attribute the class names are separated by spaces instead of commas.

just remove the comma between key and black–key