Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by brandonlind2
brandonlind2
7,823 Points

styling a <p>

I'm trying to style couple of paragraphs, the first letters in all the lines aren't vertically aligned and it gives the left side of the paragraph a jagged appearance. How do I straighten out these <p> while keeping it centered on the page? Also its weird anything I put in the div seems to be ignored and I can'figure out why, triple checked the div and there isn't an error any ideas as to why I'm having trouble with this?

section { max-width: 100%;
          margin: auto;
          padding: 0;
          text-align: center;
          }
section p { max-width:
           margin: 0 15%;
           text-align: justify;}
#aboutpara {text-align: justify;
            margin: 10%; }
Katelyn Morris
Katelyn Morris
3,443 Points

Brandon could you post your html as well?

3 Answers

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Try this?

p{
margin:0px auto;
}

Hope this helped, Shaun

brandonlind2
brandonlind2
7,823 Points

sorry, I meant vertically. That helps a bit, it fixed it at small resolutions but it still gets jagged again at larger ones. So I tried setting the section to text align center and then section p to text align: justify; this helps a bit also but know I'm running into a problem where the <p> content ends outside the window at smaller resolutions.

Jakob Wozniak
Jakob Wozniak
17,896 Points
Jakob Wozniak
Jakob Wozniak
17,896 Points

I'm having trouble understanding what exactly you want to happen- if you want the text to be centered, the first line will almost never vertically align with other blocks of centered text; that's just how centered text is. I find that using "text-align: justify" rarely looks good. If you're going for a clean look, with the block of text centered on the page, I'd try just centering the "p" on the page and using a regular "text-align: left".

I hope you find a solution!

Btw, this is my suggestion in code:

p {
  margin: 0px auto;
  text-align: left;
}
Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

I just realsied the reason your divs may not be picking the classes up:

You need to add a '.' before the class name:

.section { max-width: 100%;&#13;
          margin: auto;
          padding: 0;
          text-align: center;
          }
.section p { max-width:&#13;
           margin: 0 15%;
           text-align: justify;}