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

Killeon Patterson
Killeon Patterson
18,528 Points
Posted by Killeon Patterson
Killeon Patterson
18,528 Points

Why won't my text-align: center; command respond in CSS?

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
 <title>Sat9</title>
 <link rel='stylesheet' href='css/normalize.css'>
 <link rel='stylesheet' href='css/style.css'>
</head>

  <body>

  <div class='wrap'>
  <header class='main-header'>
  <div class='container'>
  <h1 class='name'><a href='#'> The Hair Wars</a></h1>
  <ul class='main-nav'>
        <li><a href='#'>Lifestyle</a></li>
        <li><a href='#'>Business</a></li>

  </ul>
  </div>

  </header>

  </div>

  <footer class='main-footer'>
  </footer>
  </body>

</html>

/***********CSS********/

* {
    box-sizing: border-box;
}


body {
    line-height: 1.6;
    color: #3a3a3a;
}

a {
    text-decoration: none;
}


.main-header
{
background-color: #ff1d8e;
height: 3.5em;


}

 .name 
{
font-size: 1.45em;
}



.name, 
.main-nav li 
{
text-align: center;
display: inline;
background: #fff;
 }

.main-nav a {
    font-size: .95em;
    color: #ffc3e1;
    text-transform: uppercase;
}

.main-nav a:hover {
    color:  #ff87c3;
}

.container {
    padding-left: 1em;
    padding-right: 1em;
}

.main-footer 
{
background-color: #ff1d8e;
height: 1.5em;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

.wrap
{
min-height: calc(100vh - 24px);
 }


    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }
}
Ethan Ede
Ethan Ede
11,575 Points

Try giving your .name and .main-nav selectors a width property.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

1 Answer

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

By using display: inline, you're removing any width value from the element, so there isn't a width to allow text-align: center to take effect. If they need to be inline elements, you should instead apply text-align: center to a parent block type element, i.e. .main-header.