Hello Campers,
I have tried a few solutions to pass this test but nothing seems to work. I would like to see if you guys could take a look at it please. In VS code, the image is in the center an everything seems to work fine. As soon as I dump the code in CodePen, the image is on the left side and says give the error of the following task: The “img” element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Thanks,
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
.theme {
background-color: black;
color: pink;
font-family: Brush Script MT;
}
.ache1 {
text-align: center;
font-size: 50px;
color: pink;
font-family: Brush Script MT;
}
.ache2 {
text-align: center;
font-size: 50px;
}
</style>
<html>
<main id="main" class="center">
<body style="background-color:black;">
<div id= "title" class= "theme ache1"> <h1> Tribute to Gwen Stefani</h1></div>
<div id= "img-div">
<a href="#"><img src="https://cdn140.picsart.com/279818018001201.jpg?type=webp&to=crop&r=256"
id="image" class= "center" alt="Gwen Stefani" /></a>
<h1 id= "img-caption"class= "theme ache2"> An ever-glowing beauty queen</h1>
<p id= "tribute-info" class= ache1> <a id= "tribute-link" target= "_blank" href= "https://www.gwenstefani.com/">Gwen Renée Stefani</a> (born October 3, 1969) is an American singer, songwriter, actress, and record producer.
She is a co-founder and the lead vocalist of the band No Doubt, whose singles include "Just a Girl", "Spiderwebs",
and "Don't Speak", from their 1995 breakthrough studio album Tragic Kingdom, as well as "Hey Baby" and "It's My Life"
from later albums. </p>
</div>
</body>
</main>
</html>