Tribute Page - Build a Tribute Page

HTML-CSS
1

Hi, I have no idea why my content doesnt center, why itts display isnt changing to block. Also, I have written the entire code under main, so how come it isnt a direct descendant of the main ?
Your code so far

<!-- file: index.html -->
<html>
  <main id="main">Build a Tribute Page
     <div id="img-div">
    <img id="image" ></img>
    <div id="img-caption">Tribute</div>
    <p id="tribute-info">Welcome</p>
    <a href="" target="_blank" value="" id="tribute-link"></a>
    </div>
  </main>
  <head>
    <link rel="stylesheet" href="styles.css">
    <title id="title">Tribute</title>
   
  </head>
  <body></body>
</html>

/* file: styles.css */
.image-div {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
align-items: center;
justify-content: center;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

you should re-organize your page so it follows the following order
1- DOCTYPE declaration
2- html opening tag
3- head opening tag
4- link/title/meta elements
5- head closing tag
6- body opening tag
7- main opening tag
8- remaining content
9- main closing tag
10- body closing tag
11- html closing tag

For the css code you wrote this selector:
.image-div {
Which element do you believe is being targeted by this selector?

3

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