text-align：center;給我和文本對齊：正確;爲什麼？

Question

我正在一個小項目上工作，細節其實並不重要：P

但是我爲多個「類別」創建了多個div。喜歡服務，聯繫等。

但我想對齊我的<h1 class="h1-contact">。但它不適用於某些原因..

我已經嘗試查找與此問題的其他主題，但不知何故這些答案不適用於我。

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> 

我已經想看看在元檢查看，如果別的東西是在我的H1-接觸類的方法，但它不是

任何人都可以幫我嗎？非常感謝你！

〜賈斯汀範棟勤

編輯

元檢查在Chrome '風格' h1標籤的：

.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編輯

這裏有一些鏈接可能會派上用場：

的jsfiddle：https://jsfiddle.net/justinvandongen/8Lyowreo/ 項目：http://justthinq.justinvandongen.nl

Answer 1

這裏的問題是缺少簡單或錯位收盤</div>。導致h1右對齊的那個是在最後一個col-sm-6 div之後，但是您也有一個從<div id="01">中缺少一個，所以<div id="02"嵌套在它內部。我會建議通過解析器來運行你的html來驗證任何其他缺少的關閉元素。

我還爲<div id="02" class="clearfix">添加了一個clearfix以確保div的高度迫使底部的觸點部分在正確的位置開始。

這JSFiddle應該涵蓋我們已經討論過。我剛剛根據您最後的評論進行了更新。

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