title: Html text-align: center; doesn't work
body: <p>I have a problem here, I want to center the text #top_page h1 but it doesn't work and I don't know why. can anyone suggest some ideas? I tried everything but text-align: center; and float: right or left doesn't work either.</p>
  
  <p>I searched on google for help and looked through the same questions on stack overflow but none of them solves the problem so i'm asking you guys for help.</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>body {
          background: url(img/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display: inline-block;
        font-family: 'Cabin', sans-serif;
  
      }
  
      a {
          text-decoration: none;
          color: black;
          font-family: 'Cabin', sans-serif;
      }
  
      li {
          float: right;
          margin-top: 3px;
          margin-right: 50px;
          color: white;
          font-family: 'Cabin', sans-serif;
          font-size: 15px;
      }
  
      header {
          display: block;
          position: fixed;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 50px;
          background: white;
          font-family: 'Cabin', sans-serif;
          z-index: 999999;
      }
  
      a:hover {
          color: crimson;
          font-family: 'Cabin', sans-serif;
      }
  
      span {
          width: 100%;
      }
  
      #top_page h1 {
          font-size: 80px;
          color: white;
          margin-top: 250px;
          display: block;
          text-align: center;
          font-family: 'Cabin', sans-serif;
      }
  
      #top_page h3 {
          font-size: 40px;
          margin-top: -40px;
          color: white;
          text-align: center;
          margin-left: 315px;
          font-family: 'Droid Sans', sans-serif;
      }
  </code></pre>