Positioning Text Below a Div-Img

HTML-CSS
1

I am building the Tribute page and have just got to the line below the Image Caption that says: Here’s a time line of Dr. Borlaug’s life:
Problem is, that text is sitting over the white box and not on the light grey background below it.
Does anyone know how I position the text so it sits under the white box?
I’ve added a margin and padding number in the CSS column but all that does is make the white box bigger rather than move the text.

I don’t know why my code isn’t in the grey box below, what do I need to do to get it inside the grey box?

Your code so far

Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.

Here's a time line of Dr. Borlaug's life:

 <ul id="tribute-info">
   <li>1914 - Born in Cresco, Iowa</li>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

2

Hi, give li a class and to that class give position relative and move it with top bottom right left.example left:10px; will move it right 10px from current position. hope this helps.

3

Hi Gurpreet, that’s perfect, thank you. So now I have got the text position against the light grey instead of white background do you know how I would solve the alignment problem?
Screen Shot 2020-04-20 at 9.39.08 pm

The bullet point is supposed to be aligned left but when I enter that value the line of text and the bullet goes all the way over to the far left of the screen.

Here’s the CSS:

#tribute-info {
text-align: center;
list-style: inside;
position: relative;
top: 180px;
font-size: 20px
}

4

Hi,you can use icon and remove list-style to none or put (nbsp) in html before list item hope this help

5

I’m not sure I follow. Can you type out what I’d need to add/change please?

6

share your code in codepen

7

Is this what you’re after?

https://codepen.io/lunny67/pen/OJyMLqP

8

Hi, i think this is what you trying to do
https://codepen.io/gurpreet_singh9189825/pen/gOawEBy

9

Thanks Gurpreet, really appreciate your help with this.

10

Your welcome Darren.

11

Hi Gurpreet, I have one more question for you, I hope you don’t mind. I’ve added a second bullet point in my ul but I cannot get it to justify to the one above it. Nor can I work out how to set a max width for each bullet point so it resembles the ul in the FreeCodeCamp Tribute Page. Do you know how to fix this?
https://codepen.io/lunny67/pen/NWGbEoK

12

Hi idont know how does it looks in tribute page.

13

Try here: https://codepen.io/freeCodeCamp/full/zNqgVx

14

https://codepen.io/gurpreet_singh9189825/pen/rNOyMNL hi check now think it works . still you can adjust position.

15

Thanks Gurpreet, can you tell me what you added so I can learn how to do it next time? Also, how do I justify the text so the letter M in Minnesota and letter "N directly below it lines up with the number 1 in 1933?

16

Actually, I just changed the list-style from inside to outside and that’s aligned everything :slight_smile:
The only thing I’ve lost now is the line-height to increase the horizontal space between bulleted points?

17

hi,can you show your code so that i can learn what i was doing wrong.