Help with lining up Unordered List on Project 1(tribute page)

[pelt]

Hello, I am pretty bad at this.

I am attempting the first project, which is to create a tribute page w/o looking at the solution. I have tried quite a few different ways of lining up a basic UnorderedList, but there is either always a problem with the justification, or it just won’t stay centered as the page resizes.

My current iteration is padding a row with a left side using col-xs-4, and my content in the next col-xs-4, and another padding to the right of the with col-xs-4. The problem with this is that it doesn’t scale properly when I widen the page to the length of my desktop, so it’s not really responsive there.

My page is here: https://codepen.io/pelt/full/XzrQdB

I’m clearly missing some understanding of bootstrap?

[pseudop]

here’s one way without bootstrap (remove cols)

.list {
  margin: 0 auto;
  max-width: 450px;
}

<ul class="list">
  <li>Estimated earnings ~$261,000 USD</li>
  <li>Largest win of $50,000 USD @ WESG 2016</li>
  <li>First and ONLY Non-Korean to win a tournament in Korea</li> 
</ul>

[pelt]

Thanks so much for the help.

But I actually figured it out using the columns, and then the offset feature. Also how you can put more than one description for the type of columns(mobile/desktop) in the same div that describes the behavior.

So my text is now centered the way I want.

My page looks pretty boring(text could be spiced up, I don’t have an eye for what looks good yet), but I did learn a lot about bootstrap and how it works going through this. It even displays well on my small iPhone5!

Project 1