Html text-align：center; does not work

Question

私はここに問題があります。テキスト#top_page h1を中心にしたいのですが、うまくいかず、理由がわかりません。誰もがいくつかのアイデアを提案できますか私はtext-align以外のすべてを試しました：center;フロート：左右どちらも動作しません。

私はGoogleで検索してスタックオーバーフローについて同じ質問をしましたが、そのいずれも問題を解決していないので、皆さんに助けを求めています。

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

Answer 1

あなたのヘッダーは100％の幅を持っていますが、体にはありません。 width: 100%をbodyに追加するだけです。

Answer 2

ボディエレメントの幅を100％にします。次にdiv #top_pageのテキストアライメントセンターを指定します。