Tell us what’s happening:
Describe your issue in detail here.
I am getting the error " Your #image
should be centered within its parent."
Ive tried fixing it on my own but dont know what im doing wrong.
Your code so far
<!-- file: index.html -->
<!DOCTYPE hmtl>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title id="title">Color Experts Beauty Salon</title>
<link href="styles.css" rel="stylesheet/">
<h1 id="name" class="title">Color Experts Beauty Salon</h1>
</head>
<body>
<main id="main">
<div id="img-div">
<img id="image" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Funsplash.com%2Fs%2Fphotos%2Fsalon&psig=AOvVaw37hTw3NmGGt8X6HVrPn0AV&ust=1665763916090000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCPCn8qfM3foCFQAAAAAdAAAAABAI">
<figcaption id="img-caption">A beauty salon</figcaption>
</img>
</div>
<div>
<h2 id="tribute-info">Come book an appointment with us.
</h2>
<a id="tribute-link" href="https://www.google.com/" target="_blank">https://www.google.com/
</a>
</div>
</main>
</body>
/* file: styles.css */
header{
border: 10px;
}
h1{
color:#396a93;
text-align: center;
border: 30px;
}
img{
width: 75%;
margin: 50px auto 50px 60px;
max-width: 100%;
max-height: auto;
align-items: center;
display: block;
;
}
body{
background-color: gray;
}
a{
color: silver
}
#img-div img{
display: block;
flex-wrap: center;
text-align: center;
justify-content: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: