# Help with "build a tribute page"

**URL:** <https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328>\
**Category:** General\
**Created:** [April 8, 2017, 10:39pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328 "2017-04-08T22:39:14Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdeyoung1974](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sdeyoung1974](https://forum.freecodecamp.org/u/sdeyoung1974)\
**Post date:** [April 8, 2017, 10:39pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/1 "2017-04-08T22:39:15Z")

</div>

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. ☹

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [April 8, 2017, 11:02pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/2 "2017-04-08T23:02:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdeyoung1974](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sdeyoung1974](https://forum.freecodecamp.org/u/sdeyoung1974)\
**Post date:** [April 8, 2017, 11:15pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/3 "2017-04-08T23:15:37Z")

</div>

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

> **[wJLOqQ](https://codepen.io/sdeyoung/pen/wJLOqQ)**
>
> ...

---

<div class="post-metadata">

**Author:** ![dapo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dapo/32/160641_2.png) [@dapo](https://forum.freecodecamp.org/u/dapo)\
**Post date:** [April 8, 2017, 11:43pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/4 "2017-04-08T23:43:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sdeyoung1974](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sdeyoung1974](https://forum.freecodecamp.org/u/sdeyoung1974)\
**Post date:** [April 8, 2017, 11:53pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/5 "2017-04-08T23:53:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dapo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dapo/32/160641_2.png) [@dapo](https://forum.freecodecamp.org/u/dapo)\
**Post date:** [April 9, 2017, 12:21am UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/6 "2017-04-09T00:21:37Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![kevinSmith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevinsmith/32/72934_2.png) [@kevinSmith](https://forum.freecodecamp.org/u/kevinSmith)\
**Post date:** [April 9, 2017, 12:28am UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/7 "2017-04-09T00:28:32Z")

</div>

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:

```auto

<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

```auto
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.

---

<div class="post-metadata">

**Author:** ![sdeyoung1974](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sdeyoung1974](https://forum.freecodecamp.org/u/sdeyoung1974)\
**Post date:** [April 9, 2017, 12:45am UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/8 "2017-04-09T00:45:20Z")

</div>

That did the trick! Thanks ksjazzguitar! 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:51pm UTC](https://forum.freecodecamp.org/t/help-with-build-a-tribute-page/104328/9 "2021-01-17T20:51:53Z")

</div>