Build a Tribute Page assistance

HTML-CSS
1

Tell us what’s happening:

So my list isn’t lined up perfectly with the tribute info title and I am unsure how to add those white squares/rectangles at the top, bottom, and behind the image and it’s caption. I’ve tried Google, but apparently I don’t know what to Google.

Your code so far
html:

<main>

  <h1 class="title"> Dr. Norman Borlaug </h1>
 <p class="title-caption"> The man who saved a billion lives </p>
  <div id="image-div">
  <img id="imgage" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/9/f/9fa30c203dbdae683592b729fca4f171dd9980fe.jpg' alt="Dr. Borlaug" class="center">
  <p class="img-caption" id="img-caption">Dr. Norman Borlaug, second from left, trains biologtists in Mexico how to increase wheat yields - part of his lifelong war on hunger.</p> </div>
  <div id="tribute-info"> <p class="tribute-info-title" id="tribute-info-title"> Here's a timeline of Dr. Borlaug's life:</p>
  <ul>
    <li> 1914 - Born in Cresco Iowa </li>
    </ul>
  </div>
</main>

css:

body {
  background-color: #e6e6e6;
}

.title {
  font-size: 50px;
  font-family: sans-serif;
  text-align: center;
  padding-top: 75px;
}

.title-caption {
  text-align: center;
  font-family: sans-serif;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-caption {
  font-size: 17px;
  text-align: center;
  padding-bottom: 50px;
  font-family: sans-serif;
}

.tribute-info-title {
  text-size: 50px;
  font-weight: bold;
  text-align: center;
  font-family: sans-serif;
}
 
ul {
  display: table;
  margin: 0 auto;
}

Your browser information:
Link to what I have so far: https://codepen.io/DavidForsberg/full/pOwQOd
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 10575.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to what I am trying to copy: https://codepen.io/freeCodeCamp/full/zNqgVx
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

2

I am assuming you are talking about a container div.
You can wrap your elements in a div and give it background #fff or white.

3

You don’t have any positioning CSS on either that I can see. you’re just centering everything…You’ll need to do more to center that section then left align with in the center.

4

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 easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums