I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
I agree with bbsmooth, please post a link to your Codepen instead.
But you do have errors in both the HTML and CSS.
I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.
Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors.
Press the down arrow to the right of the HTML code box and select Tidy HTML. Now, look at the HTML, if there are issues you should see tags marked in red. That is the new Syntax Highlighting showing you where the problems are.
Press the down arrow to the right of the HTML code box and select “Analyze HTML”.
Then do the same for the CSS.