I just started my journey with FCC, and I'm currently working on my first project which is the Tribute Page. I would really appreciate some feedback on my code, as I'm not entirely confident in it. However, my main issue right now is making the image responsive by using
max-width: 100%;
display:block;
height: auto;
But whenever I try to make the image responsive this way, it ends up being too large, causing the text that should be below it to overlap. I'm puzzled as I thought block-level elements shouldn't behave this way. Here's the link to my Codepen for reference, thank you! https://codepen.io/spccbw/pen/VwLQPjv
*{
margin: 0px;
padding: 0px;
}
#banner{
border: 1px solid red;
background-color:yellow;
height: 90px;
width: 100%;
}
h1, h2{
text-align:center;
font-family: Arial;
margin-top: 10px;
color: red;
}
#image{
max-width: 100%;
display:block;
height: auto;
margin: 0 auto;
}
#img-div {
width: 100%;
padding-top: 20px;
border: 2px solid green;
background-color: #e8dd5f;
}
#img-caption{
margin-top: 5px;
font-family: Arial;
font-weight: bold;
text-align:center;
}
#tribute-info{
padding-top: 10px;
background-color: #ede7a6;
}
#tribute-info p{
display:block;
font-size: 30px;
text-align:center;
}
ul{
list-style-type:none;
margin-top:10px;
text-align:center;
font-family: Monospace;
}
li{
font-size: 1.3em;
}
.bold{
font-weight:bold;
font-size: 1.4em;
font-style:normal;
text-transform:uppercase;
}
#footer-text{
font-style:italic;
}<!DOCTYPE html>
<html>
<head>
<title>Franky</title>
</head>
<body>
<div id="main">
<div id="banner">
<h1 id="title">Franky the Robot</h1>
<h2>GOAT Character</h2>
</div>
<div id="img-div">
<img id="image" src="https://static.zerochan.net/Franky.full.2514784.jpg">
<p id="img-caption"> Franky being cool, as usual</p>
</div>
<div id="tribute-info">
<p>List of things Franky Enjoys</p>
<ul>
<li> <span class="bold">Cola</span> - Possibly his favorite of all </li>
<li> <span class="bold">Robots</span> It's because he is one! </li>
<li> <span class="bold">Possibly Robin</span> Really.. who doesn't? </li>
<ul>
<p id="footer-text"> If you actually want to know about Franky you should most definitely visit <a href="https://onepiece.fandom.com/wiki/Franky" id= "tribute-link" target="_blank" > <span class="bold">click here</span></a>
</div>
</div>
</div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>