why doesn’t the center work with class=“center”
<html>
<head>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="css/tribute.css">
<style>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.center {
margin: auto;
width: 50%
padding: 10px
}
</style>
</head>
<body>
<div id="main">
<h1 id="title" class="center">Jimi Hendrix</h1>
<div id="img-div">
<div class="row">
<div class="column"></div>
<div class="column">
<img src="images/jimi_hendrix.jpg" alt=" jimi hendrix at concert" id="image">
<img src="images/jimi_hendrix2.jpg" alt=" jimi hendrix at concert" id="image">
<img src="images/jimi_hendrix3.jpg" alt=" photo of jimi hendrix " id="image">
<img src="images/jimi_hendrix4.jpg" alt=" jimi hendrix at concert"" id="image"
</div>
<div class="column">
<img src="images/jimi_hendrix5.jpg" alt=" jimi hendrix artwork" id="image">
<img src="images/jimi_hendrix6.jpg" alt=" jimi hendrix with guitar" id="image">
<img src="images/jimi_hendrix7.jpg" alt=" jimi hendrix at conert" id="image">
<img src="images/jimi_hendrix8.jpg" alt=" head shot of jimi hendrix " id="image">
<img src="images/jimi_hendrix9.jpg" alt=" jimi hendrix artwork" id="image">
</div>
<div class="column"></div>
</div>
<p id="img-caption" class="center"><em>one of the greatest guitar players ever</em></p>
</div>
<div id="tribute-info" class="center">
<p>Well, I stand up next to a mountain</p>
<p> I chop it down with the edge of my hand</p>
<p>Yeah</p>
<p>Well, I stand up next to a mountain</p>
<p>And I chop it down with the edge of my hand</p>
<p>Well, I pick up all the pieces and make an island</p>
<p>Might even raise a little sand</p>
<p>Yeah</p>
<p>'Cause I'm a voodoo child</p>
<p>Lord knows I'm a voodoo child baby</p>
<p>I want to say one more last thing</p>
<p>I didn't mean to take up all your sweet time</p>
<p>I'll give it right back to ya one of these days</p>
<p>Hahaha</p>
<p>I said I didn't mean to take up all your sweet time</p>
<p>I'll give it right back one of these days</p>
<p>Oh yeah</p>
<p>If I don't meet you no more in this world then uh</p>
<p>I'll meet ya on the next one</p>
<p>And don't be late</p>
<p>Don't be late!</p>
<p>'Cause I'm a voodoo child voodoo child</p>
<p>Lord knows I'm a voodoo child</p>
<p>Hey hey hey</p>
<p>I'm a voodoo child </p>
<p>I don't take no for an answer</p>
<p>Question no</p>
</div>
<a href="https://en.wikipedia.org/wiki/Jimi_Hendrix" target="_blank" id="tribute-link">
Learn more about Jimi Hendrix
</a>
</div>
</body>
</html>