Tribute page. Problem with my tribute page project

Hello guys, I have one problem with my tribute page, I want my timeline to be more clean, how can I fix the bullet points and years in the same position?

Here is my code: https://codepen.io/WOW4WINNIE/pen/JjWjrKr

Thanks!

in container id you decide to center content. thats the problem. remove it and element will be aligned. sorry for my bad english

1 Like
#container{
  background-color: #7E9DA4;
  text-align: center;
  padding: 5%;
}

> Blockquote
remove text-align :center; and it will works
1 Like

Hi!

yeah that’s the main problem.

There are 2 ways or more fixing this.

  • Remove text-align:center from #container and center the elements other way e.g. flex-box

  • Add new CSS rule applied on the element containg your list <ul> with text-align: left (overwriting parent’s rule)

But why this is happening? You applied text-align: center to parent element - #container - and all elements nested within inherits this text-align CSS rule.
In general, using text-align to center elements is not a good idea.

1 Like

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