Problem with text-align: center

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;
}

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?

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.