Tell us what’s happening:
Describe your issue in detail here.
Your code so far
<!-- file: index.html -->
<main id="main">
<link rel="stylesheet" href="styles.css">
<title id="title">Tribute Page</title>
<div id="img-div">
<img style="display: block;" id="image">
<div id="img-caption" >Caption</div>
</div>
<div id="tribute-info">Info</div>
<a id="tribute-link" href=""https://example.com"" target="_blank">Tributelink</a>
</div>
<style>
#image {
max-width: 100%;
height: auto;
}
</style>
<div id="parent-element">
<img id="image" src="image.jpg" alt="Image">
</div>
</main>
/* file: styles.css */
.parent-element{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page`Preformatted text`