Bug in the html structure of piano player page

There is an issue with the Html structure of the web page piano player that was given to us as a project in the DOM exercise.

Here is the link to the page - https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/dom-javascript-events/projects/piano-keys

As you can see the piano keys are overlapping with the other elements of the page. I saw the project walkthrough everything was good there.

Please let me know what it actually is? I reset the worksheet 2 to 3 times but nothing happens.

I think that’s more likely an error in your code somewhere, as this is what I see:

Can you post your code? We’ll be able to see if the code is wrong. :slight_smile:

Yeah, sure.

hello, please try to solve my issues asap.

I’m sure you’ve moved on from this but for anyone else having the same issue (I did!!)

It is nothing we have/haven’t done with the js code but two issues with the code we are given.

First on their html page scroll through the piano to the bottom and you’ll see the ‘high-c-key’ is wrapped in div tags rather than section tags like all the rest. Change this and you’ll see the styling updates but it’s still too low.

So next go to their css page and change the piano width to accommodate the extra key - eg from 305 to 330px

And voila

Hope this helps