Responsive Web Design Projects - Build a Tribute Page

Tell us what’s happening::
I have worked on this code for quite some time, I know it works in other browsers and set-ups…(Sublime Text, CodePen.io, etc.). I have walked away, read, searched, retried…all to no avail!!! Having just 3 items not letting you pass is driving me nuts!!

  Those items are:
       1.) Your img element should have a display of block.

      2.) Your #image should have a max-width of 100%

     3.) Your #image should be centered within its parent.

What am I doing wrong???

Your code so far:

My code for this section

                                     (My HTML portion)
<figure id="img-div">
        <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/7/75/Napoleon_Hill_headshot.jpg" alt="Napoleon Hill" />
        <figcaption id="img-caption"><small>Napoleon Hill as a younger man.(circa 1904)</small>
        </figcaption>
      </figure>
                                            (My CSS portion)
ul li {
   padding: 2px
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

#img-caption {
  text-align: left;
}

Please HELP!
Beyond Frustrated

Your browser information:

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

Please post all your HTML and CSS.

Did you remember to link to the CSS?

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

Yes, I will post both codes HTML/CSS codes…

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="author" content="by Jeffrey Saathoff">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>Tribute Page about Napoleon Hill</title>
</head>

<header id="main-header">
  <h1 id="title">Napoleon Hill</h1>
  <p>Life and Inspirations of Napoleon Hill</p>
</header>

<body>

  <main id="main">
    <div class="picture">

      <!-- This allows User Story #8 & #9 to work: Resizing & Centered img -->
      <figure id="img-div">
        <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/7/75/Napoleon_Hill_headshot.jpg" alt="Napoleon Hill" />
        <figcaption id="img-caption"><small>Napoleon Hill as a younger man.(circa 1904)</small>
        </figcaption>
      </figure>

    </div>

    <div class="trib-info" id="tribute-info">
      <center>
        <h3>Here's the following time line of Napoleon Hill's life:</h3>
      </center>
      <br>

      <ul>
        <li>
          <strong>1883</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspA humble life begins late in a one-bedroom cabin to James Monroe Hill and Sarah Sylvania (Blair), Oliver Napoleon Hill was born on October 26th in <a id="tribute-link" href="/wiki/Pound,_Virginia" target="_blank" title="Pound, Virginia">Pound</a>, Virginia which in the Eastern <a href="/wiki/Appalachia" title="Appalachia">Appalachian</a> cultural region.
        </li>
        <br>
        <li>
          <strong>1892</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspTragedy struck young Napoleon's life his mother passed away, leaving him lost and bewildered.
        </li>
        <br>
        <li>
          <strong>1894</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon's father remarried two years later to Martha.
          It is said his stepmother was a good influence for young Napoleon: "Hill's stepmother, was a widow of a school principal, civilized the wild-child, Napoleon, making him go to school and attend church.
        </li>
        <br>
        <li>
          <strong>1896 - 1927</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspDuring this time, was a trying times in Hill's life. From a failed marriage (circe 1898) to business turmoil, yet
          not to keep a good man down, he used these experiernces to fuel him to write his first known commerical work.
        </li>
        <br>
        <li>
          <strong>1910</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspOn June 23rd, 1910, Hill married <i>Florence Elizabeth (Hood)Horner</i>, with whom he had three sons: James, born in 1911; Napoleon Blair, born in 1912; and a David, born in 1918. After his automobile college folded, Hill relocated to Lumberport, West Virginia, to be with his wife's family.
        </li>
        <br>
        <li>
          <strong>1928</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspAfter relocating to Philadelphia, Hill was able to persude a publisher to publish his eight-volume
          work <i><a href="/wiki/The_Law_of_Success" title="The Law of Success">The Law of Success</a></i> (1925).
        </li>
        <br>
        <li>
          <strong>1929</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspThe beginning of <a href="/wiki/Great_Depression" title="Great Depression">Great Depression</a>,however, affected Hill's finances, as well as most of the United States.
        </li>
        <br>
        <li value="1935">
          <strong>1935</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspDue to the sign of the times, Hill's wife Florence filed for a divorce.
        </li>
        <br>
        <li>
          <strong>1937</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon published the best-selling book <bold>Think and Grow Rich</bold>, which became his best-known work.
          Napoleon's new wife Rosa Lee Beeland contributed substantially to the authoring and editing of <i></i>.
          Napoleon's biographers would later say this book sold 20 million copies over 50 years, wealthy once more, Hill re-initiated his lavish lifestyle
          and purchased a new estate in Mount Dora, Florida.
          The couple divorced around 1940, with much of the wealth from the book going to his wife Rosa Lee Hill,
          leaving Napoleon Hill to start his pursuit of success once again.
        </li>
        <br>
        <li>
          <strong>1940</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspLove is fleeting, in the early part of that year, Rosa filed for divorce.
        </li>
        <br>
        <li>
          <strong>1942</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNever one to ever give up on love, Napoleonsp met Annie Lou Norman, who was 47 years old at the time, thirteen years his junior. he was every part of 60.
        </li>
        <br>
        <li>
          <strong>1943</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon married his friend Annie Norman, with whom he moved to California and started working as a lecturer. Annie would be his last spouse and
          the one who would be there when the final day would come. During those years, Napoleon Hill was an old man.
          He had already recovered financially, and his way of life was much more sustainable.
        </li>
        <br>
        <li>
          <strong>1970</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspAfter many years on the lecture curcuit, and at the ripe old age of 87, Napoleon Hill passed way.
        </li>
      </ul>
    </div>

    <br>

    <blockquote cite="https://thegoalchaser.com/napoleon-hill-quotes/">
      <p>
        <center>“Whatever the <i>mind of man</i> can <i>conceive</i> and <i>believe</i>, it can <i>achieve</i>!”</center>
      </p>
    </blockquote>
    <center><cite>---- Napoleon Hill</cite></center>

    <br>
    <br>

    <footer id="main-footer">
      <small> To learn more about this charismatic man, Napoleon Hill see this <a class="footnote" href="https://www.thefamouspeople.com/profiles/napoleon-hill-2424.php" target="_blank"> site.</a></small>
    </footer>

  </main>
</body>

</html>
/*
	This is the CSS Style Sheet for 
    Napoleon Hill's Tribute Page.
*/

#main-header {
  background-color: linen;
  color: #000;
  text-align: center;
}

body {
  background-color: lightgray;
  color: #555;
  font-family: Bookman Old Style, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 0;
}

ul li {
   padding: 2px
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

#img-caption {
  text-align: left;
}

#tribute-info {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#tribute-link {
  width: 80%;
  margin: auto;
}

#main-footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

Both codes are added.
Thank You in advance for looking for me.

I did not see the top of my code…here is the top of my HTML

Tribute Page about Napoleon Hill

Napoleon Hill

Life and Inspirations of Napoleon Hill

Please edit your code 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 (').

Sorry about that…I will fix it, so that people can see what I have.

Here is the HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="author" content="by Jeffrey Saathoff">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>Tribute Page about Napoleon Hill</title>
</head>

<header id="main-header">
  <h1 id="title">Napoleon Hill</h1>
  <p>Life and Inspirations of Napoleon Hill</p>
</header>

<body>

  <main id="main">
    <div class="picture">

      <!-- This allows User Story #8 & #9 to work: Resizing & Centered img -->
      <figure id="img-div">
        <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/7/75/Napoleon_Hill_headshot.jpg" alt="Napoleon Hill" />
        <figcaption id="img-caption"><small>Napoleon Hill as a younger man.(circa 1904)</small>
        </figcaption>
      </figure>

    </div>

    <div class="trib-info" id="tribute-info">
      <center>
        <h3>Here's the following time line of Napoleon Hill's life:</h3>
      </center>
      <br>

      <ul>
        <li>
          <strong>1883</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspA humble life begins late in a one-bedroom cabin to James Monroe Hill and Sarah Sylvania (Blair), Oliver Napoleon Hill was born on October 26th in <a id="tribute-link" href="/wiki/Pound,_Virginia" target="_blank" title="Pound, Virginia">Pound</a>, Virginia which in the Eastern <a href="/wiki/Appalachia" title="Appalachia">Appalachian</a> cultural region.
        </li>
        <br>
        <li>
          <strong>1892</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspTragedy struck young Napoleon's life his mother passed away, leaving him lost and bewildered.
        </li>
        <br>
        <li>
          <strong>1894</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon's father remarried two years later to Martha.
          It is said his stepmother was a good influence for young Napoleon: "Hill's stepmother, was a widow of a school principal, civilized the wild-child, Napoleon, making him go to school and attend church.
        </li>
        <br>
        <li>
          <strong>1896 - 1927</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspDuring this time, was a trying times in Hill's life. From a failed marriage (circe 1898) to business turmoil, yet
          not to keep a good man down, he used these experiernces to fuel him to write his first known commerical work.
        </li>
        <br>
        <li>
          <strong>1910</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspOn June 23rd, 1910, Hill married <i>Florence Elizabeth (Hood)Horner</i>, with whom he had three sons: James, born in 1911; Napoleon Blair, born in 1912; and a David, born in 1918. After his automobile college folded, Hill relocated to Lumberport, West Virginia, to be with his wife's family.
        </li>
        <br>
        <li>
          <strong>1928</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspAfter relocating to Philadelphia, Hill was able to persude a publisher to publish his eight-volume
          work <i><a href="/wiki/The_Law_of_Success" title="The Law of Success">The Law of Success</a></i> (1925).
        </li>
        <br>
        <li>
          <strong>1929</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspThe beginning of <a href="/wiki/Great_Depression" title="Great Depression">Great Depression</a>,however, affected Hill's finances, as well as most of the United States.
        </li>
        <br>
        <li value="1935">
          <strong>1935</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspDue to the sign of the times, Hill's wife Florence filed for a divorce.
        </li>
        <br>
        <li>
          <strong>1937</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon published the best-selling book <bold>Think and Grow Rich</bold>, which became his best-known work.
          Napoleon's new wife Rosa Lee Beeland contributed substantially to the authoring and editing of <i></i>.
          Napoleon's biographers would later say this book sold 20 million copies over 50 years, wealthy once more, Hill re-initiated his lavish lifestyle
          and purchased a new estate in Mount Dora, Florida.
          The couple divorced around 1940, with much of the wealth from the book going to his wife Rosa Lee Hill,
          leaving Napoleon Hill to start his pursuit of success once again.
        </li>
        <br>
        <li>
          <strong>1940</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspLove is fleeting, in the early part of that year, Rosa filed for divorce.
        </li>
        <br>
        <li>
          <strong>1942</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNever one to ever give up on love, Napoleonsp met Annie Lou Norman, who was 47 years old at the time, thirteen years his junior. he was every part of 60.
        </li>
        <br>
        <li>
          <strong>1943</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspNapoleon married his friend Annie Norman, with whom he moved to California and started working as a lecturer. Annie would be his last spouse and
          the one who would be there when the final day would come. During those years, Napoleon Hill was an old man.
          He had already recovered financially, and his way of life was much more sustainable.
        </li>
        <br>
        <li>
          <strong>1970</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspAfter many years on the lecture curcuit, and at the ripe old age of 87, Napoleon Hill passed way.
        </li>
      </ul>
    </div>

    <br>

    <blockquote cite="https://thegoalchaser.com/napoleon-hill-quotes/">
      <p>
        <center>“Whatever the <i>mind of man</i> can <i>conceive</i> and <i>believe</i>, it can <i>achieve</i>!”</center>
      </p>
    </blockquote>
    <center><cite>---- Napoleon Hill</cite></center>

    <br>
    <br>

    <footer id="main-footer">
      <small> To learn more about this charismatic man, Napoleon Hill see this <a class="footnote" href="https://www.thefamouspeople.com/profiles/napoleon-hill-2424.php" target="_blank"> site.</a></small>
    </footer>

  </main>
</body>

</html>

Here is the CSS

/*
	This is the CSS Style Sheet for 
    Napoleon Hill's Tribute Page.
*/

#main-header {
  background-color: linen;
  color: #000;
  text-align: center;
}

body {
  background-color: lightgray;
  color: #555;
  font-family: Bookman Old Style, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 0;
}

ul li {
   padding: 2px
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

#img-caption {
  text-align: left;
}

#tribute-info {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#tribute-link {
  width: 80%;
  margin: auto;
}

#main-footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

I would like to Thank everyone in adavance, Please help me to fix and finish this page!!

your code is not placed inside a code block still.
You should use the backticks as I mentioned in a previous comments.
```
like this
```

(the post explains how to find them on your keyboard)

You are not linking to the stylesheet correctly.

<link rel="stylesheet" type="text/css" href="css/style.css">

It should be this in the freeCodeCamp editor.

<link rel="stylesheet" href="styles.css">

When I fix that your code passes.


I updated your post with the correct code formatting. The easiest way to format the code is just to use the </> button in the textbox toolbar as shown in the gif posted. Then just paste in the code between the backticks.

lasjorg,
You are a life saver!!! I was going bald, from pulling my hair out!! Thank You!!!