CODEWITHSUNDEEP
htmlcss
Dylan Williams
Dylan Williams

Reputation: 15

CSS Text Align - Why is my paragraph text not aligning as I need it to, while headlines do?

I need the text on this page to mirror how the headlines directly above each section are laid out (3 items, 1st left, 2nd center and 3rd right align).

Can anyone explain why this hasn't worked for me?

/** General Settings **/

.heading {
  font-family: 'Lato', sans-serif;
  text-align: center;
  padding: 0px;
}
.subheading {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
  padding: 0px;
}
.content {
  font-family: 'Lato', sans-serif;
  padding: 0px;
}
.title1 {
  text-align: left;
}
.explanation1 {
  font-size: 1em;
  text-align: left;
  max-width: 300px;
  min-height: 100px;
}
.title2 {
  text-align: center;
}
.explanation2 {
  font-size: 1em;
  text-align: center;
  max-width: 300px;
  min-height: 100px;
}
.title3 {
  text-align: right;
}
.explanation3 {
  font-size: 1em;
  text-align: right;
  max-width: 300px;
  min-height: 100px;
}
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">

<div class="heading">
  <h1> Page Heading </h1>
</div>
<div class="subheading">
  <h2> Page Subheading </h2>
</div>

<div class="title1">
  <h4> Reason 1 </h4> 
</div>

<div class="explanation1">
  <p>Reason 1 Text</p>
</div>

<div class="title2">
  <h4> Reason 2 </h4>
</div>

<div class="explanation2">
  <p>Reason 2 Text</p>
</div>

<div class="title3">
  <h4> Reason 3 </h4>
</div>

<div class="explanation3">
  <p>Reason 3 Text</p>
</div>

Definitely a noob question but if someone could explain where I went wrong I'd much appreciate it!

Upvotes: 1

Views: 1425

Answers (3)

Ussi45
Ussi45

Reputation: 1

this problem sometimes happen with me if you use localhost that take time to refresh the page on web server (http) if the files in your pc try to open it with chrome like file:///C:/file/index.html in your browser

Upvotes: 0

BlackHatSamurai
BlackHatSamurai

Reputation: 23503

You need to do something like this:

.heading {
font-family: 'Lato', sans-serif;
text-align: center;
padding:0px;
}

.subheading {
font-family: 'Titillium Web', sans-serif;
text-align: center;
padding:0px;
}

.content {
font-family: 'Lato', sans-serif;
padding:0px;
}

.title1{
text-align: left
;
}

.explanation1 {
font-size: 1em;
text-align: left;
}

.title2 {
text-align: center;
}



.explanation2 {
font-size: 1em;
text-align: center;

}

.title3 {
text-align: right;
}

.explanation3 {
font-size: 1em;
text-align: right;

}

and remove the width/height limits. Tested here: https://jsfiddle.net/9v5824kp/

Upvotes: 0

Ouroborus
Ouroborus

Reputation: 16894

Your explination classes have max-width while your heading classes do not. Usually this is causing your paragraph blocks to be narrower than the page.

Upvotes: 1

Related Questions