I’m working on my tribute page and am having trouble with getting the list to center as a block style. I know how to center the text in general but just need it to be in a block and straight.
Haiiiyo!
Here’s a couple of hints for you to work on:
- CSS property
list-style-position(MDN Reference) - Given that you are using Bootstrap, you can use three columns in a row to do that if you don’t need to line things up down to the pixel
I noticed that some of your tags are not closed in the code. Particularly with development on CodePen, I personally find that closing a tag as soon as you open it saves you a lot of time debugging an unclosed tag.
Also, don’t be afraid to start a new row if the flow of your content naturally looks like a row—it makes the code easier to read, too.
Good luck. 
Hi thanks for the help, I’m still not sure on how to get the timeline centered in a block format. Does it have something to do with rows?
Haiiiyo.
You will have to get rid of all formatting that makes the list aligned centred to begin with—that means text-align: center of .timeline in the CSS and any text-center Bootstrap classes.
If we use the Bootstrap implementation, all that’s left to do is to put the list inside the middle column of a row that contains three row. For instance:
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<ul>
<!--Timeline list items-->
</ul>
</div>
</div>
You can adjust either the column size or the padding inside the middle column for finer control of spacing.
There are other issues with the HTML, too. For example, I don’t think that the Bootstrap row class is meant to be used on a ul element; in addition, some <div>'s are still not closed (use the Tidy HTML function in CodePen to have your code cleaned up so you know what is closed and what isn’t immediately—it’s accessible at the top right corner of the HTML window).
In addition, I think you should read this section of the Bootstrap documentation thoroughly—it will save you a lot of time and hassles later.
Good luck!