Problems positioning an element and the text inside of it

Hi everyone, I’m working on my tribute page and I’m really struggling in getting it done. So, I’m trying to include a quote but there are many things going wrong when I try to make it and I just don’t know how to address the problem.

  1. I don’t know how to make my #quote-container element go down (which is colored blue only because I wanted to see visually where it was) for some reason the circle image I have on top of it is slightly overlapping it.
  2. The text inside the element doesn’t seem to be centered inside the element even if I instructed it to do it (I think…I’m not even sure if I nested it properly).
  3. The text inside of it is writing over itself when I resize de browser.

I’m thinking the reason is because my nesting is done all wrong, but I’m not sure. I don’t know how to tackle this or where to start.
Any help would be greatly appreciated.
Thank you!

I assume you defined the im2 class as the following to move it down from the div with class=“atlas-image”. By using top: 60px; (shown below) it is shifted down into the blue div. If you want to keep top:60px; then you could add a margin-top: 60px; to the #quote-container definition.

.img2 { 
  border-radius: 50%; 
  position: relative;
  top: 60px;  
}

The text is shifted over 10px to the right, because you defined p elements with left: 10px;

That is because you defined p elements with line-height: 0;

1 Like

Wow! Everything you suggested worked perfectly. I really appreciate you taking the time for helping me with this. Thank you.

I am glad everything worked for you.