Help with "build a tribute page"

1

I’m trying to center my unordered list. When I use “text-center” class it puts a big space between the bullet and my text. Is there a different way I should approach this? Also, I can’t seem to center my pic.

I know I could use a div class=“text-center” and place my whole page in there but it messes with the unordered list as stated above. :frowning:

2

We can help you better if you provide a link to your codepen.

3

Sure, there’s not much there yet. I just started it.

4

text-center affects the content or child elements. so you could add it to the parent div to have all things centered
<div class="col-xs-12 text-center">

this is also why your image is not getting centered

5

Yes I did originally try that but as stated, it messed with the unordered list for some reason, giving a huge space between the bullet and list.

6

ok, wasn’t clear to me what you wanted it to do

try using list-style-position: inside; for the li items

7

I don’t think you want to center the list, per se, just move it to the right. Here’s what I came up with:


<div class="container">
  <div class="jumbotron">
    <h1 class="text-center">Jimi Hendrix</h1>
    <h4 class="text-center">The man who revolutionized guitar</h4>
    <img src = "http://uptownmagazine.com/files/2012/05/Jimi-Hendrix.jpg">
    <br/>
    <div id = "myList">
      <ul>
        <li>born Johnny Allen Hendrix; November 27, 1942 – September 18, 1970</li>
        <li>Born in Seattle, Washington</li>
      </ul>
    </div>
    <p>If you would like to read more about <a href ="https://en.wikipedia.org/wiki/Jimi_Hendrix" target="_blank"> Jimi Hendrix</a>
  </div>

</div>
<footer class="text-center">
  <p>Written and coded by Steve DeYoung</p>
</footer>

and

body{
  margin-top: 60px;
}

img {
  display: block;
  margin: 0 auto;
  padding: 10px;
}

#myList {
  padding: 5px 20%;
}

This allows you to love the list a little to the right - here it assumes that you want 20% of padding on each side of the screen.

I also removed your col-xs-20 as I had no idea what it was doing. You can add it back in if you want.

8

That did the trick! Thanks ksjazzguitar! :slight_smile: