Margins of
on website are same code but look different

Question

On the website that I'm building, some pages the text extends all the way to the edges. I've compared the HTML for ages, and don't see what I'm doing wrong. Maybe it's in the CSS? Does anyone see what's going on? I tried refreshing my browser and clearing my cache.

Why does p extend to to the edge on only some of my pages? When the HTML looks the same?

<div id="wrapper3">
<div id="portfolio" class="container">
<div class="title">
<h2></h2>
<span class="byline"><!--Integer sit amet pede vel arcu aliquet pretium--></span> 
<br>
<p></p>
<p></p>
</div>
</div>

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Jan 06 '15 at 19:30

score 0 · Answer 1 · answered Jan 06 '15 at 19:31

0

Try adding some left and right padding like this:

enter image description here

What I used is:

padding: 8em 2em;

Which means, 8em top and bottom padding as well as 2em left and right padding

answered Jan 06 '15 at 19:31

Akhilesh B Chandran

6,523
7
28
55

score 0 · Answer 2 · edited May 23 '17 at 12:22

This is just because the text is centered. Some lines of text break in different places than others, and so the length of a line will differ. Apart from this centered text, I don't see any difference.

Try to resize your browser slowly, and you'll see the margin increasing (or decreasing) until one word jumps to the other line, and the margins are gone.

You could try:

text-align: justify;
text-align-last: center;

This will add slightly smaller or large spaces between words to make the text fill the entire line. The last (shorter) line will be centered, (but not on Safari).

There are other questions about this subject. You may have a look for yourself:

How to Center-Justify text in CSS?

score 0 · Answer 3 · answered Jan 06 '15 at 19:35

Since you're using center-aligned text, the visual width is going to vary because some lines are a bit longer or shorter than others depending on the words used in them. If you set p { background: red; } you'll see that the paragraphs do extend to the edges, but the text isn't filling all the available space.

A good workaround is to use padding on the <p> to force space on the edges, but even that won't be foolproof. You can force lines to take up all available space by using text-align: justify;, but shorter lines will align left instead of center.

score 0 · Accepted Answer · answered Jan 06 '15 at 19:37

0

Since you only have a little text, it would look much better with a narrow paragraph, like this :

p {
    line-height: 180%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    width: 600px;
}

You will always have the same width, centered, and the text will be displayed "as in a book"

answered Jan 06 '15 at 19:37

sodawillow

12,497
4
34
44

Nice ! ^^ Please accept this answer if it fits your need (green check next to the vote counter) :) – sodawillow Jan 06 '15 at 19:45

Margins of on website are same code but look different

4 Answers4

Margins of
on website are same code but look different