Tribute Page - Build a Tribute Page - Center Information

I have been trying to set the image to have a display of block, the #image to have a max-width of 100% and to center the image but I have net been successful. Please help. Where am I wrong?

   **My code so far**
/* file: index.html */
<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
 <main id="main">
 	<h1 id="title">Dr. Kelvin Makau</h1>
 	<div id="img-div">
 		<img name="image of Kelvin" src="" id="image">
     <div id="img-caption">This is a pretty image</div>
   <p id="tribute-info">This is a tribute of Kelvin but he has a long way to go still</p>
   <a id="tribute-link" target="_blank" href="">This is a link</a>

/* file: styles.css */
 max-width: 100%;
 height: auto;
 display: flex;
 justify-content: center;
 display: block;

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hi! Welcome to the forum!

Your css is not affecting your html because you have no css link in your html head element. So the image id and img element will not be styled by the css.

Look back at the Learn Basic CSS by Building a Cafe Menu course. It will show you how to make a css link in your head element.

An image element also cannot have a name attribute. But it can have an alt attribute to describe the image.
<img name="image of Kelvin" src="" id="image">

1 Like

Thank you so much. I just have overlooked that somehow. My mistake. Thank you so much

1 Like

No problem! :slight_smile:

Also if you want to reply directly to someone, so your reply will appear in their notifications, press the button that says ‘reply’ with the left pointing arrow next to it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.