Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

brandonlind2
brandonlind2
7,823 Points

Does anyone why my p tags aren't centering in my divs?

I have a content1 and a content2 div and I cant get the paragraphs in them to center within them

the content styling is on the bottom of the style sheet https://jsfiddle.net/pwnftkpk/6/

.content1 p, .content2 p { text-align: center; background-color: rgba(0,0,0,.02); max-width: 280.34px; }

3 Answers

Livia Dobai
Livia Dobai
21,894 Points

Hi! Don't use max-width on the .content1 p and .content2 p elements. If you want to resize the column width, use instead margin left and margin right on the p element.

brandonlind2
brandonlind2
7,823 Points

OK thanks I looked margin and inline elements up, I didn't realize inline could accept left and right margin, but couldnt accept width, for some reason I thought it was the other way around

Owa Aquino
Owa Aquino
19,277 Points

Hi!

Have you try removing your max-width?

As Livia Dobai said, use the left and right margins on the p element. Specifically, with the value of auto if you want the p tag to be centered horizontally. Also, don't use decimal places for pixel values (change max-width: 280.34px; to max-width: 280px;).

If you want to see where the p tags are in relation to your divs, then put a different background color on the divs.