I have spent almost the entire week in solving this problem. Please can some one help me fixed

<main id="main" class="container-fluid text-*-center">
  <h1 id="title" class="container display-1">
    Dr. Norman Borlaug
  </h1>
<div id="img-div">
    <p id="img-caption" class="text-*-center" > The image above shows Dr. Normans and crew at work on a field </p>
  <img id="image" src="https://borlaug100.org/wp-content/uploads/sites/3/images/slideshow/slide-1.jpg" alt="Dr. Norman's photo" class="img-fluid mx-auto d-block">
     <p id="tribute-info">This one is been dedicated to Dr. Norman</p>                                       
</div>
  

<a id="tribute-link" href="https://borlaug100.org/" target="_blank" alt="Link to Dr. Normans farm">Click to read about tribute information. </a>                                                                 
                                                                                                                   
                                                                                                                                                    
    
</main>
                                                                                                                        
                                                                                                                       



main{
  backgroun-color: lightgray;
}
img {
  width: 100%;
}
h1{
  text-align: center;
  color: blue;
  padding: 20px;
}

What do you need help with? Please explain so we can best help.

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

Hi @Morie55 !

Welcome to the forum!

Just taking a quick glance at your code, it looks like you are not passing the last two tests.

If you can explain what your issue is, we can help you better. :grinning:

I have coded it, don’t really know where this error is coming from.

Can you please share your codepen link with us?

It will be much easier for us to help you, instead of having us copy and paste your code into an editor each time.

Thanks! :grinning:

Read all of the error messages, pay attention to the lower part.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

Use the “display” style property with a value of “block” for responsive images.: expected ‘inline’ to equal ‘block’

Both max-width: 100% and display: block styles should be set on the img selector.


As an aside, you should also remove width: 100% and center the image using margin: auto.

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