Need help with Tribute page please

I am not understanding what I am not doing right here.
In the html window I have:

  body {
    background-color: Black; 
    color: white;

<div id = "main">
  <h1 id = "title">Johnny Cash<h1>
     <p>One of the best country western song writer and singer of           all time!
     <div id = "img-div">
       <img id = "image" src = "" alt = "Johnny Cash" width = "40%"
height = "40%"
       <p id = "img-caption">
       picture of Johnny Cash, writing song's.
        <figcaption id="img-caption">Johnny Cash was first inspired by gospel and Irish music. and started to write songs when he was twelve, this is the same time he learned to play guitar and had a chance to perform. </figcaption>
    <p id="tribute-info"> 
        Although Johnny Cash was known for his country western music... alot of people dont know he was later  inspired by rock and roll, blues, folk, gospel and rockabilly. 
       <a id="tribute-link" target="_blank" href="">

And in the css window I have :

  width 400px;

#image {
  max-width: 100%;
  height: auto;
  display: block;

Just cant get the last test to pass got 9/10. Please help me!

Hey! You should post a link to your codepen here instead of code so its easier for others to debug your code.

<a href= A Pen by Emily McBride (>
dont know if I did this right. But … hoping so lol

@emcbridevipemails, try reviewing this lesson

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 (’).

the error you’re getting is this

2. The <img> element should be centered within its parent element.

you need to center the image container inside of the parent element. you should first try to implement that yourself.

If you want to know the solution click here.

which you can accomplish by adding this to the element with the id of #image.

  display: block;
  margin: 0 auto;

The img element has the default display of inline block so you need to change it and then use a margin of auto so there is equal margins on the both sides which ends up centering it.

p.s you don’t need to use the a tag to add links. just copy paste them here and they’ll work just fine.
Hope this helped! :slightly_smiling_face:

lol feeling like a ditz for the way i did that thought about it after I posted the link with tags lol natural blonde lol… thankyou so very much you are very helpful. :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.