How to center the elements within a centered list?

Tell us what’s happening:
Hello, so i’m working on the Tribute page from the curriculum and i have passed all the tests. It is not quite finished yet but thats just because i’m still gathering the required information. My question is regarding the info section. I want to make a list that is centered but the individual items with the year numbers don’t line up with each other. I’ve tried many things but i can’t seem to figure out. Basically the list itself is supposed to be centered but the list items should be right below each other.

Somewhat like this:

                                1899: Very long example sentence
                                1905: Example

But right now it looks like this:

                            1899: Very long example sentence
                                              1905:Example

Your code so far

This is my page.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Challenge: Build a Tribute Page

Link to the challenge:

First of all, adding inline-styles to your HTML makes your CSS very difficult to maintain, so I’d avoid that.

As for your issue, remove text-align:center from your <ul>, and instead give it:

ul {
  max-width:500px; // or whatever width you'd like
  margin:0 auto;
}
1 Like

Thanks for the help. This worked. Why didn’t i think of that? xD

To the other thing.

Yeah i want to remove the inline styles anyway. I’m still pretty new to all of this so i noticed that i needed to clean this up.

But thanks for the tip.
Appreciate it.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.