My markup
<div class = "about-us">
<p class = "about-us-text">
Lorem ipsum dolor sit amet, magna dolor ultricies arcu, sit vivamus, in dolor quis sit, ut sed urna hendrerit. Donec augue irure pharetra ultrices condimentum iaculis. Sollicitudin eu scelerisque eget nunc. Et erat lectus nunc, pellentesque non dis massa vivamus sed rerum, hendrerit sit enim conubia, bibendum quidem odio ultrices suspendisse nam lorem, dui pellentesque neque ligula. Pellentesque ultrices id eiusmod gravida turpis morbi, ac pulvinar, justo mauris ipsum cras justo. Vulputate montes, dui adipiscing, dolor tortor habitasse tortor amet quam fermentum, in aut proin quam donec vitae. Aliquam dolores, vivamus fermentum dolor eros. Sit orci amet, mattis sollicitudin cursus sed sit cum fusce, at faucibus nullam sit morbi enim. Mauris hendrerit placerat cras tellus tempor.
Purus praesent tempus nunc, malesuada litora, mollis amet est natoque gravida. Nullam erat, maecenas enim sed vitae wisi purus placerat. Cursus cras vestibulum sem rhoncus, urna quis sem, nulla sagittis sed est non, parturient tristique porta nostra, viverra curabitur laoreet. Non iaculis elit nibh, neque ac, mollis facilisi molestie mattis, ipsum maecenas placerat tortor tincidunt proin, mauris laoreet. Sodales mi nec sodales quis, mauris porta, turpis in morbi integer velit, urna justo integer justo, nec ultricies.
Suscipit donec nullam egestas bibendum potenti, ac iaculis dapibus voluptate in. Ligula aliquam faucibus magna fringilla, vivamus quisquam varius. Tellus enim fusce leo integer, maecenas cras, tempor nulla amet vel, pede vitae nunc tortor nibh quis. Malesuada a at lorem dolor nec sociosqu, enim maecenas quis metus placerat, ultricies nunc, tristique ut numquam porttitor habitasse eget. Nibh aliquet qui consectetuer eu scelerisque cursus, sed scelerisque morbi pulvinar, nulla ligula mollis cursus non orci nunc. Lacus quisque, duis eu, interdum metus, lorem eget, fusce ultrices scelerisque dui adipiscing duis. Pellentesque morbi ornare, porttitor tincidunt tellus egestas tincidunt laoreet. Odio diam est ac in tellus commodo, gravida nunc nibh eget leo sed. Enim neque diam non. Convallis maecenas augue lorem adipiscing mattis, non harum ultricies nostra suspendisse, dolor sagittis pellentesque iaculis, pede suscipit magna sem metus justo, arcu turpis adipiscing eget scelerisque vel nulla. Vivamus porta curabitur dictumst, vel imperdiet netus posuere.
Odio pellentesque ligula amet, in varius vestibulum laoreet urna molestie, urna eros etiam senectus suscipit ultrices. Ut vitae felis quam officiis consectetuer, condimentum donec quam pede, a cursus eget et vestibulum varius. Gravida ac, malesuada tincidunt sit a aptent ac, cras eget a amet non, cubilia vel interdum elementum. Eros pede, cras sit ad est, in ut tincidunt diam ante, consectetuer eros justo sed orci, suscipit nisl porttitor. Phasellus praesent, non accumsan massa adipiscing aliquet, aenean diam vel, quam ullamcorper tempus quam sem sapien. Arcu mauris, sed gravida. Enim sodales dui urna conubia vestibulum senectus. Curabitur voluptatem donec mauris duis, mauris ante, magna vehicula eros tortor eleifend in, semper ut morbi ipsum magnis aliquam nibh, mi erat commodo ante non. Consectetuer scelerisque malesuada a, aliquet amet interdum, ut nec mauris magna, ullamcorper lectus. Dui in integer sed in.
</p>
</div>
And my applied CSS rule to it.
.about-us
{
background-color:#EEE;
margin: 0 auto;
margin-top:-10px;
width:920px;
height:auto;
border: 1px solid #EEE;
border-radius:6px;
}
.about-us-text
{
text-indent:40%;
margin-top:10%;
line-height:42px;
font-size: 15px;
padding-left: 12px;
padding-right: 32px;
margin-left: 22px;
}
The currently looks like this
As you can see The right side of the paragraph is uneven compared to the left side. the left is aligned properly while the right is not. I tried applying a padding to it and margin to it but it seems no use.
If you have a better design decisions or design suggestion feel free to chip them in.
Add
text-align:justify