Can someone help me figure out why my text-align: center; is not working properly? I am trying to center both the text and the span within the image, but it's not displaying correctly. (I'm still learning, so I appreciate your understanding).
This is how my HTML code looks like:
<div id="image">
<div id="imageContainer">
<span><h1>Responsive Web</h1></span>
</div>
</div>
And this is how my CSS code looks like:
#imageContainer h1 {
text-align: center;
font-size: 60px;
color: white;
letter-spacing: 0.05em;
}
#imageContainer span {
display: inline-block;
padding: 0.5em 0.2em;
border: white solid 10px;
}
I can't seem to understand why the H1 tag and the span are not aligning properly with the text-align: center; property. It may sound like a silly question coming from a newbie like me, but I would really appreciate some guidance. Thank you in advance!