Tribute website: image does not center when setting it to be responsive

HTML-CSS
1

When writing my tribute website, I am able to center my image using inline style attributes, however when I add code in my style section to make the image responsively resize, it no longer centers the image. I have used the code I can find online for the inline style, and the code found on freecodecamp to set up responsiveness. I am really unsure what to do at this point.

Here is my code:

h1 { font-size: 50px; color: blue; text-align: center; } h2 { font-size: 40px; color: blue; text-align: center; } body { background-color: green; color: red; font-size: 30px; } header { background-color: orange; } footer { background-color: orange; color: blue; fontsize 30px; } img { display: block; height: auto; max-width: 100%; } 
  <header>
    <h1>Robert Green Ingersoll</h1>
    <h2>Voice of Free Thought,</h2>
    <h2>Voice of Reason</h2>
  </header>
  
    <div id="image.div">
      <p style="text-align: center;"/> <img  src="https://imageshack.com/a/img921/5391/6fuTt6.jpg" alt="Robert Green Ingersoll The Hands That Help Quote."></p>
   </div>
  
    <body>
      <p> Ipsum Dolor Est </p>
    </body>

  <footer>
    <p>More information: <a href="https://en.wikipedia.org/wiki/Robert_G._Ingersoll" target="blank">Wikipedia</a>
  </footer>

Blockquote

2

I have no idea why my style tags were not included in the block quote. Here is the whole document, second try.

h1 { font-size: 50px; color: blue; text-align: center; } h2 { font-size: 40px; color: blue; text-align: center; } body { background-color: green; color: red; font-size: 30px; } header { background-color: orange; } footer { background-color: orange; color: blue; fontsize 30px; } img { display: block; height: auto; max-width: 100%; } 
  <header>
    <h1>Robert Green Ingersoll</h1>
    <h2>Voice of Free Thought,</h2>
    <h2>Voice of Reason</h2>
  </header>
  
    <div id="image.div">
      <p style="text-align: center;"/> <img  src="https://imageshack.com/a/img921/5391/6fuTt6.jpg" alt="Robert Green Ingersoll The Hands That Help Quote."></p>
   </div>
  
    <body>
      <p> Ipsum Dolor Est </p>
    </body>

  <footer>
    <p>More information: <a href="https://en.wikipedia.org/wiki/Robert_G._Ingersoll" target="blank">Wikipedia</a>
  </footer>
3

Ok, I don’t even understand how to post my code. Perhaps that is the first thing someone should help me with.

Thanks so much,
forbin1138

4

To center image in container like yours you could use auto margin like this:

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

As for how to insert code, you write ``` on new line, after that code and close it with ``` on new line again.
Like this:
```

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

```
Or just press enter to start new line and the press ctrl+shift+c or </> icon above text editor.

5

Thank you for the reply. I understand now what I was doing wrong, everything works. Just to be sure I’m going to post my updated code to see if I understand how to quote it.

<!DOCTYPE   html>

<style>
  h1 {
    font-size: 50px;
    color: blue;
    text-align: center;
  }
  h2 {
    font-size: 40px;
    color: blue;
    text-align: center;
  }
  body {
    background-color: green;
    color: red;
    font-size: 30px;
  }
  header {
    background-color: orange;
  }
  footer {
    background-color: orange;
    color: blue;
    fontsize 30px;
  }
  img { 
  display: block; 
  height: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
</style>
  
  <html>
    <div id="main">
      
      <header>
        <h1>Robert Green Ingersoll</h1>
        <h2>Voice of Free Thought,</h2>
        <h2>Voice of Reason</h2>
      </header>
      
        <div id="image.div">
         <img  src="https://imageshack.com/a/img921/5391/6fuTt6.jpg" alt="Robert Green Ingersoll The Hands That Help Quote.">
       </div>
      
        <body>
          <p> Ipsum Dolor Est </p>
        </body>
  
      <footer>
        <p>More information: <a href="https://en.wikipedia.org/wiki/Robert_G._Ingersoll" target="blank">Wikipedia</a>
      </footer>

And that seems to work. Thanks again. I’m going to mark this as solved.