Cant seem to get my text centered

Tell us what’s happening:
I cant get the information about Obamas life (with the ul and il) to go to the middle of the page. Anyone knows why it doesnt work?

Your code so far

<script src=""></script>

<div id="main">
  <h1 id="title">Barack Obama</h1>
  <h2>Former USA President</h2>
  <div id="img-div">
    <img id="image" 
src="" alt="Barack Obama">
    <h3 id="img-caption">Former USA President</h3>
  <p id="tribute-info">Obama's life:</p>
     <li><strong> 1961-</strong> Barack Obama was born on August 4, in Honolulu Hawaii  </li>
     <li><strong> 1979-</strong> Obama went to the Occidental College in Los Angeles. </li>
     <li><strong> 1981-</strong> Obama made his first public speech. He transferred to Columbia University to major in political science.</li>
     <li><strong> 1983-</strong> Obama graduated from Columbia University with a Bachelor of Arts degree, magna cum laude. </li>
     <li><strong> 1988-</strong> Obama began to study at Harvard Law School.</li>
     <li><strong> 1990-</strong> On February 5, Obama became the first black president of the Harvard Law Review.</li>
     <li><strong> 1991-</strong> Obama graduated Harvard with his law degree and began work on his book Dreams of My Father.</li>
     <li><strong> 1996-</strong> Obama was elected to the Illinois Senate.</li>
     <li><strong> 2005-</strong> On January 5, Obama was sworn in as a U.S. Senator </li> 
     <li><strong> 2009-</strong> On January 20, Obama was sworn in as the 44th President of the United States. </li>
     <li><strong> 2017-</strong> January 20th marked Obama's last day in the office. </li> 

    <a id="tribute-link" href="" target="_blank"> Read More About Obama</a>



#img-caption {
tribute-info p{
#tribute-info ul{ 
position: absolute;
left: 50%;
transform: translatex(-50%);

  body { 
    background-image: url(; 


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

1 Like

Hello @Nqek. Can you please give the CodePen URL? Also, can you clearly explain your question? Thanks. hope this works. I want to put the parts of Obamas life in the middle of page, but that doesnt work. It doesnt wanna move to the middle

1 Like

Hey @Nqek! Found the solution!
Your CSS selector was wrong:
#tribute-info ul {}

That’s wrong because the list is not nested inside the #tribute-info.

I changed the selector to:
ul li {}
Whenever you want changes to the text in a list, you need to target the list items and not the list wrapper.

Then, I removed the existing positioning CSS codes and then added the text-align: center; property. This made the text centered, but the bullet points still exists in the same place. So, I added list-style-type: none; so that the bullet points are hidden.

Final Result:

Hope this helps you!

1 Like

Hello there,

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 (’).

Thank you so much :smiley: one more question, is there a way to put all the dates under each other? because now it looks kinda messy

But you wanted it to be centered! :grinning:

text-align:center is rarely a good idea. It works well for small pieces of text like headlines, also on birthday cards and wedding invitations. Longer text should never be centered. If you want it text-align:left without the text stretching all the way from one side of the page to the other, you’ll need to give the container (#img-div) a max-width and center it with margin:0 auto.

i want the dates to be like here: is that possible or is the text too long for that? thanks for the help anyway :DD

The example project is using max-width and auto margin. Here is the CSS.

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;

li {
  margin: 16px 0;

If you add a container around the ul you can also use text-align and display: inline-block. Edit: This avoids using a width, but that also will not wrap the text, so if that is what you do want use a width instead.

.container {
  text-align: center;

ul {
  display: inline-block;
  text-align: left;
  list-style: none;
1 Like

Hey @lasjorg. The solution you provided is far more better than text-align: center;. I would suggest @Nqek to use it. :grinning:

thank you so much :smiley: that solved it