Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Srdjan Cestic
Srdjan Cestic
6,855 Points

Problem with text-align: center

Why my banner text isn't align center?

Here is link of my workspace : https://w.trhou.se/w7t3q0aqfg

Thanks!

3 Answers

Garrett Sanderson
Garrett Sanderson
12,735 Points

The text-align property applies to the children of an element. You need to set banner with text-align: center.

.banner {
  margin: 0;
  padding: 0;
  height: 300px;
  background-color: #ddd;
  text-align: center; /* here */
}

.headline, .tagline{
  color: white;
  line-height: .8;
}

.headline {
  margin: 0;
  font-size: 3rem;
  padding-top: 20px;
}

.tagline{
  font-size: 2rem;
  letter-spacing: 2px;
  padding-bottom: 20px;
}
Srdjan Cestic
Srdjan Cestic
6,855 Points

Thanks Garrett, I add text-align: center but I really don't know where is problem, nothing changed.

Workspace : https://w.trhou.se/cnn85m1v4q http://port-80-v3bu2j03q0.treehouse-app.com/

Garrett Sanderson
Garrett Sanderson
12,735 Points

Hi Srdjan,

You had this style for you navigation li

.main-nav li {
margin: 100px 0;
}

It was pushing the headline over because it was extending past the height of you header container.

I changed that to be

nav.main-nav {
padding: 2.4rem 0;
}

You can see an example I made in codepen! http://codepen.io/thegrid/pen/yeeZwz?editors=110

Does this make sense?

Srdjan Cestic
Srdjan Cestic
6,855 Points

Hi, sorry for late reply. I tottaly understand what you mean and everything look 100% logical.

I changed code to remove .main-nav margin-bottom : 0 and there was some difference, but text don't get align center. Then I copy your .main-nav and banner code from codepen.io and nothing changed.

Now this is really silly, I'm so dumb. Problem is margin-bottom of .logo ... In moment I writing this comment I accident decide to look other element in header and change margin-bottom of .logo to 0.

Thanks Garrett for help, you focused me to think about that ''invisible'' borders.

Garrett Sanderson
Garrett Sanderson
12,735 Points

No worries!

If you want to read more on the box model for css Chris Coyier has a great blog post on it https://css-tricks.com/the-css-box-model/