title: I am having trouble making an image resize responsively to its parent element
body: <p>I am new to coding and it is very ugly and disorganized but i am trying to pass the last test on a freecodecamp project. <a href="https://codepen.io/thomas-nurney/pen/PoZjXyw?editors=1100" rel="nofollow noreferrer">https://codepen.io/thomas-nurney/pen/PoZjXyw?editors=1100</a></p>
  <pre><code>&lt;img id=&quot;boardpic&quot; src=&quot;https://live.staticflickr.com/7845/46438012904_068fcdaf8b_b.jpg&quot; max-width=&quot;100%&quot; width=&quot;200&quot; height=&quot;200&quot; style=width:100%; border=&quot;0&quot; alt=&quot;Surfboard shaping&quot;/&gt;&lt;fig-caption&gt;Patience is the key to smoothing out the rough edges while shaping a surfboard.&lt;/figcaption&gt;
        
  </code></pre>
  <p>Any help would be appreciated. I've tried adding the max-width property to several elements but am not getting past the test.</p>