wyśrodkowanie przycisku

Question

Hej, mam mały problem, nie potrafię wyśrodkować przycisku, pomoże ktoś? 

<header>
    <div class="container">
      <h1><a href=""><img src="img/logo-tajem.png" alt="Tajam"></a></h1>
      <nav>
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">EXPERTISE</a></li>
          <li><a href="">TEAMS</a></li>
          <li><a href="">WORKS</a></li>
          <li><a href="">PEOPLE SAY</a></li>
          <li><a href="">CONTACT</a></li>
        </ul>
      </nav>
      <h2>We Are Awesome Creative Agency</h2>
      <hr>
      <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
      <button class="button-header">LEARN MORE</button>
    </div>
  </header>

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

.container {
  max-width: 980px;
  margin: 0 auto;
}

button {
  color: #00e0d0;
  border: 1px solid #00e0d0;
  background: none;
  padding: 10px 15px;
  font-weight: 400;
  font-size: 16px;
  font-family: 'Hammersmith One', sans-serif;
  border-radius: 2px;
}

header {
  background-image: url('img/background-forest.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 670px;
  width: 100%;
}

.button-header {
  margin: 0 auto;
  text-align: center;
}

 

Answer 1

Do klasy .button-header dodaj display: block; wtedy margin: 0 auto; zadziała :)