New to coding. Need help in solving a problem in my tribute page

In the timeline section of my tribute page, I added space between each year by using margin-bottom (need varying space. Else would have added by creating a class for it.) within the list elements. But the sizes of the year text seems to be varying. You can notice the difference more evidently between years 2008 and 2011. However if I am changing the 2011 text to 2008, the sizes do match. Its not clear about what is happening here. Can any one help me with the reason? And if there is, may be provide an alternate easier method to add varying space between list elements?

Here is the link to the page: https://codepen.io/rrahul17498/full/VmqoQd/

Thank you for your time.

Hi I’m on my phone so I’ll be quick. Your problem is that your li and your p are not linked. I would put everything into a grid to align everything…, no ?

By the way, love the time line.

Okay. I am confused a bit with the the grid system. Let me check again. Thanks :slight_smile:

Maybe there’s another way to do it - I just seem to use the grid a lot.

I made two pens to illustrate:
Basics of bootstrap grid here (you need to put everything in a <div class="container">

and basics of push / pull in Grid here

And of course, Bootstrap’s documentation.
.

1 Like

Here’s how your page looks for me in Firefox. There are two or three things that might not be intended.

@janschreiber Yes. I accidentally deleted a row statement. Thats why the error is coming. Rectified it now.
@timotheap Thanks for the illustrations. They are very helpful.

1 Like