How to center paragraphs and photos

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>

You are forgetting some punctuation at the end of a few of those CSS lines. Javascript may not require semicolons but CSS does.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like