CSS Bootstrap question

I’m having a hard time understanding how the bootstrap “offset” classes work, specifically the ones used in the example tribute page: https://codepen.io/freeCodeCamp/pen/NNvBQW

Specifically, I’m looking at how the author was able to get a gap before or after the div with the timeline information in it. Here’s what I have right now:

Some of Bob Uecker’s notable achievements:

  • Appeared as the ring announcer for the 1987 Wrestlemania event in Pontiac, Michigan.

I’ve tried defining screen sizes for mid, small, and extra-small, with or without offsets for any and all of them, and nothing seems to be working. What am I missing here?

Also, this is my first time posting to this forum, so I have no idea how to paste a snippit without it translating into actual code…

the <div> tags have nothing really to do with the spacing between the header tags and list tags.


there’s “built-in” spacing between the <h3> tags and the <ul> tags. Once the <h3> tag is closed and the <ul> is started the browser inserts appropriate spacing

For reference, the full pen is here: https://codepen.io/tlannoye11/pen/QdXojg/

I added the red border to try and better illustrate what I’m looking for. I want to have a nice amount of gutter in between the two lists, but no matter what I do, they keep mashing up next to each other to look like one big blob. How can I control the space between the two lists?

Nvm, I think I found the answer…needed to add a second div inside the one that has the col-sm-6 class.

Updated code is in the same pen above.