Responsively resize images

Tell us what’s happening:

My apologizes, I’m new to coding and feel like this should be rather easy. However, I just cannot get this last test to pass. It’s making the image responsively resize.

Your code so far

<body id="main">
  <h1 id="title">Vlad The Impaler</h1>
  <div id="img-div">
  <img id="image" src="">
    <div id="img-caption">
      <p>A rendering of Vlad the Impaler</p>


text-align: center;

text-align: center;

img {
max-width: 100%;
height: auto;

I’ve seen this issue around a few places, but never really seemed to be able to find an answer. What am I missing? Thanks in advance!

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

No need to apologize, coding is a learning process. Welcome to the forum!

When you’re coding in Codepen, it automatically generates the boilerplate code, so it has already generated the

    <!-- This is where your code goes -->

With that I suggest you change your body id="main" to main id="main"

as for the issue with your image being responsive, it wants your image to be responsive to the width of the parent element.
I’ll give you a hint and say that your solution can be found with one of these display properties.