text-align：center;私とテキストの整列を与える：右;どうして？

Question

私は少しのプロジェクトに取り組んでいますが、詳細は本当に問題ではありません：P

しかし、複数の「カテゴリ」に対して複数のdivを作成しています。サービスのように、連絡先など

私は<h1 class="h1-contact">を整列しようとしています。しかし、それは一変しても機能しません。

私は既にこの質問で他のトピックを調べてみましたが、どういうわけかそれらの答えは私にとってはうまくいきませんでした。私はすでにそれが何か他のものが私のH1-接触クラスの道にあった場合は見て点検要素で見てみましたが、

CSS

.h1-contact { 
    font-size: 30px; 
    line-height: 1.8; 
    text-transform: uppercase; 
    font-family: "Montserrat", sans-serif; 
    text-align: center; 
} 

HTML

<hr /> 
<br> 
<div id="02"> 
<h1 class="h1-contact">Contact</h1> 
<p>Hi</p> 

なかった

誰か私を助けることができますか？どうもありがとうございました！

〜ジャスティン・ファン・ドンゲン

EDIT

要素H1タグのChromeで 'スタイル' を調べる：

.h1-contact { 
     font-size: 30px; 
     line-height: 1.8; 
     text-transform: uppercase; 
     font-family: "Montserrat", sans-serif; 
     text-align: center; 
    } 

*ALL THIS IS STRIKED IN CHROME* 
    .h1, h1 { 
     font-size: 36px; 
    } 
    .h1, .h2, .h3, h1, h2, h3 { 
     margin-top: 20px; 
     margin-bottom: 10px; 
    } 
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
     font-family: inherit; 
     font-weight: 500; 
     line-height: 1.1; 
     color: inherit; 
    } 
    h1 { 
     margin: .67em 0; 
     font-size: 2em; 
    } 
    h1 { 
     font-size: 30px; 
     line-height: 1.8; 
     text-transform: uppercase; 
     font-family: "Montserrat", sans-serif; 
    } 

ANOTHER EDITここ

は、いくつかのリンクです便利なかもしれない：

JSFiddle：https://jsfiddle.net/justinvandongen/8Lyowreo/ プロジェクト：http://justthinq.justinvandongen.nl

Answer 1

ここでの問題は、単に不足しているか、見当違いの終値</div>されます。 h1を右揃えにしているのは最後のcol-sm-6 divの後ですが、<div id="01">から1つも抜けているので、<div id="02"はその内部にネストされています。他の欠落している要素を確認するために、パーサーを使用してhtmlを実行することをおすすめします。

また、<div id="02" class="clearfix">にclearfixを追加して、divの高さが底部の接触部分を正しい位置で開始させるようにしました。

このJSFiddleは、私が議論したことをカバーするべきです。あなたの最後のコメントに基づいて更新しました。

https://jsfiddle.net/khristopherallen/vufhju4n/2/