My code seems to be correct, but FCC doesnt think so

This is my HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

<!-- doctype html

-->

<div id="main">

<div id="title">

<strong>

<h1>

Broccoli - The true hero

</h1>

</strong>

</div>

<figure id="img-div">

<img id="image" src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg" alt="Broccoli">

<figcaption id="img-caption">

Broccoli treehouse

</figcaption>

</firure>

<div id="info">

<div id="tribute-info">

<p>

Broccoli is an edible green plant in the cabbage family whose large flowering head, stalk and small associated leaves are eaten as a vegetable. Broccoli is classified in the Italica cultivar group of the species Brassica oleracea.

</p>

</div>

<a href="https://www.healthline.com/nutrition/foods/broccoli" id="tribute-link" target="_blank">

<div class="outer-circle">

<div class="inner-circle">

<p>

LEARN MORE

</p>

</div>

</div>

</a>

</div>

This is my CSS

body{

background-color: #313F51;

font-family: 'Roboto', sans-serif;

}

#main{

color: #white;

}

img{

width: 100%;

border-top-left-radius: 44%;

border-top-right-radius: 44%;

border: 6px solid #eff593;

max-width: 100%;

margin-right: auto;

margin-left: auto;

display: block;

}

#img-div{

align-content: center;

text-align: center;

}

#title{

text-align: right;

margin-right: 80px;

font-size: 18px;

}

#info{

display: flex;

top: 50%;

position: absolute;

}

#tribute-info{

width: 25%;

margin-left: 3%;

border: 2px solid #eff593;

border-radius: 10px;

}

#tribute-info p{

padding: 5%;

}

#tribute-link {

top: 0%;

right: 14%;

position: absolute;

}

.outer-circle{

height: 150px;

width: 150px;

position: absolute;

top: 0%;

right: 30%;

border-radius: 50%;

border: 2px solid #efa593;

}

.inner-circle{

width: 125px;

height: 125px;

border-radius: 50%;

border: 2px dotted #fff;

margin: 10px auto;

}

.inner-circle p{

color: white;

font-weight: bold;

margin: 34% 10%;

}

.outer-circle:hover {

background-color: #315141;

}

@media (max-width: 470px){

#info{

display: flex;

top: 33%;

position: absolute;

}

#tribute-info{

width: 92%;

margin: 5%;

}

#tribute-link{

top: 100%;

right: 33%;

position: absolute;

}

Its about tribute page: build a tribute page. New respons version

This is the error I get

// running tests You should have a

main

element with an

id

of

main

. Your

img

element should have a

display

of

block

. Your

#image

should have a

max-width

of

100%

. Your

#image

should be centered within its parent. // tests completed

are you linking the css stylesheet in your html file?

1 Like

Man you said somehting there. let me check