Why do you not just use text-align center in .title instead of .main-header?

Question

So basically, I am trying to center the title of the page. I was thinking that I could use:

.title {
    text-align: center;
}

but instead, the way it works is:

.main-header {
    text-align: center;
}

Why does center align not work with .title?

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetive Neue" Helvetica, Arial, sans-serif;
}

/***************************** HEADER AND BODY */

.main-header {
  background-color: #ffa949;
}



.title {
  color: white;
  font-size: 1.625rem; 
}



h1 {
  font-size: 5.625rem; /* 90px/16px */
  color: rgba(255, 255, 255, 1);
  font-variant: small-caps;
  font-weight: normal;
  line-height: 1.3;
}

h2 {
  font-size: 53px;
  font-weight: normal;
}

h3 {
  font-size: 20px;
  color: #48525c;
}

/************************** Primary and secondary content */

.primary-content, .secondary-content {
  width: 60%;
}



.primary-content,
.main-header {
    text-align: center;
}



/****************************************** Pseudo classes */

a:link {
  color: #ffaa66;
  text-decoration: none;
}

a:hover {
  color: #ffbb77;
}

a:visited {
  color: purple;
}

a:active {
  color: tomato;
}



.t-border {
  border-top: 2px solid lightgrey;
}


ul li {
  margin-bottom: 5px;
}

/**************************************** ID selectors */

#main-footer {
  padding: 60px 0;
  border-bottom: solid 10px #ffa949;
}

<!DOCTYPE html> <html> <head> <title>Lake Tahoe</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="top" class="main-header"> <span class="title">Journey Through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header>

    <div class="primary-content t-border">
        <p class="intro">
            Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
        </p>
        <a class="callout" href="#more">Find out more</a>

<div class="wildlife">
  <h2>Check out all the Wildlife</h2>
  <p>
    As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
  </p>
    </div>

  <a class="callout" href="#wildlife">See the Wildlife</a>
</div> <!-- End primary content -->

    <div class="secondary-content t-border group"> 
 <div class="resorts">
  <h3>From Tents to Resorts</h3>
  <p>
    Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
  </p>
  <ul>
    <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
    <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
    <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
  </ul>     
 </div>
 <div class="tips">
  <h3>Pack Accordingly</h3>
  <p>
    One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
  </p>
  <ol>
    <li>Bring layers of clothing</li>
    <li>Pack sunscreen</li>
    <li>Carry extra water just in case</li>
    <li>Pack light</li>
  </ol>
 </div>
    </div>

    <footer id="main-footer" class="t-border">
        <p>All rights reserved to the state of <a href="#">California</a>.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>

Answer 1 · 2015-07-14T14:23:35Z

July 14, 2015 2:23pm

The element with class of .title is a span, which is an inline element (only as wide as the content it contains). To center text inside an element, the element would need to be display:block or explicitly have a width (width:100% or width:500px).

You can change the span to a div and not have to adjust any css.

<header id="top" class="main-header">
  <div class="title">Journey Through the Sierra Nevada Mountains</div>
  <h1>Lake Tahoe, California</h1>
</header>

Answer 2 · 2015-07-14T14:25:32Z

July 14, 2015 2:25pm

Your title is in a span element, which is an inline element. The text-align center is probably "working", kind of. Because it's an inline element, as opposed to a block element, the span is only taking up the space it needs.

// Try adding the following style to your .title class.
.title {
  border: 1px solid red;  // This will help you visualize what's happening.
}

// This should also work to center-align the title.
.title {
  display: block;
  text-align: center;
}

Answer 3 · 2015-07-14T14:34:04Z

July 14, 2015 2:34pm

Found a good explanation as to why you can't use text-align:center in this scenario. You would need to change the span element's default display property: http://stackoverflow.com/questions/7756926/difference-between-span-and-div-with-text-aligncenter

Welcome to the Treehouse Community

Looking to learn something new?

SABCD ABCD

SABCD ABCD

Why do you not just use text-align center in .title instead of .main-header?

3 Answers

Jeff Lemay

Jeff Lemay

rydavim

rydavim

SABCD ABCD

SABCD ABCD

Jeff Lemay

Jeff Lemay

jessenagelberg

jessenagelberg