Learn Responsive Web Design by Building a Piano - Step 5

Tell us what’s happening:
Describe your issue in detail here.

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>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></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/107.0.0.0 Safari/537.36 Edg/107.0.1418.42

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

Link to the challenge:

i make step 5 but it not correct

This is the .keys element they were asking you to change.

All new .key elements should be nested inside it.

Hey!
Your .key elements should be nested inside the div with class .keys:

<div class="keys">
  <div class="key"></div>
  ...
</div>