CSS Non-responsive? On TP Challenge

[hirerjl]

Tell us what’s happening:
I am unable to resize or center my image and don’t understand where I am failing. Have tried a style element in the css coding space, as well as inline and internal in the html space. Nothing I do in the css coding space applies/affects display and it appears as if nothing in that space connects with or to what’s in the html space. (For example, I tried centering the title too, but nothing changed/happened.)
I have googled help, and searched these posts for help to no avail. The response from the “run test” button is no help at all. I believe this will link to the project: https://codepen.io/rjlamont/pen/BapMpjX

8 of 10 tests are passing. User stories 8&9 are failing.

Thanks.

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<div>
  <main id="main">
    <h1 id="title">Harriet Tubman</h1><br>
    <div id="img-div">
    <img id="image" src="https://cdn.britannica.com/79/198579-050-F8A4363D/Harriet-Tubman.jpg"alt="Youthful Harriet Tubman sitting in chair."></img>
      <figcaption id="img-caption"> <b>A youthful Harriet poses in a seated position.</b></figcaption>
    
        </div>
      
      <p>"I wanted to do my tribute page on Harriet Tubman because I believe her to be the bravest person that has ever lived. Harriet Tubman was born a slave almost 200 years ago. During her lifetime, she fought for the abolition of slavery and risked her life, on numerous occasions, to help other slaves escape. She also fought on behalf of the Union Army, as a spy, during the US civil war. Harriet Tubman is an American hero."</p>
      <p id="tribute-info">"You can find out more about Harriet Tubman by visiting <a id="tribute-link" target="_blank" href="harriet-tubman.org"> harriet-tubman.org</a>, a website dedicated to sharing the amazing story of this phenomenal woman."</p>
  </main>
</div>

Here’s one thing I’ve tried in the css space:

<style>
#image {
display: block; 
maxwidth: 80%; 
margin-left: auto;
margin-right: auto;
}
</style>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

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

[jwilkins.oboe]

Hi @hirerjl !

Welcome to the forum!

The first issue is that you should not use style tags in your css section.
Once you remove those, then you will be up to 9/10.

The second issue is that you have written max-width incorrectly in your css.
You wrote this

@hirerjl

maxwidth: 80%;

Once you fix those two issues the test should pass.

Also, it will help if you format your css code. It will help with spotting those errors.

[hirerjl]

Thanks! Could you explain why not to use style tags in the CSS editor? I thought that’s what it was for. How is that space used? Also, I did end up figuring out the centering by adding
///

#image {display: block; max-width: 80%; margin-left: auto; margin-right: auto;}

///
within the image element. (Also corrected the max-width typo.) Thanks again for the assistance.

[hirerjl]

Just wanted to thank again because correcting the max-width typo got me the 10/10 pass, not just 9/10. Appreciate it.

[jwilkins.oboe]

Glad you were able to pass the tests.

As to your question, the style tags are html tags. That is why they don’t belong in the css section.

https://www.w3schools.com/tags/tag_style.asp

Now that you are building projects you want to put your html in the html section, and css in the css section. No style tags necessary

[hirerjl]

Ahhh, yes, I understand. Thank you for all of the clarifications and for taking the time to respond. All is greatly appreciated.