Textausrichtung: Mitte; gibt mir und text-align: richtig; Warum?

Question

Ich arbeite an einem kleinen Projekt, die Details sind nicht wirklich wichtig tho: P

Aber ich erstelle mehrere Divs für mehrere "Kategorien". Wie Services, Kontakt usw.

Aber ich versuche, meine <h1 class="h1-contact"> auszurichten. Aber es funktioniert nicht für someereason.

Ich habe schon versucht, zu anderen Themen mit dieser Frage zu suchen, aber irgendwie diese Antwort funktionierte nicht für mich.

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> 

Ich habe bereits versucht, in Elemente zu suchen Inspizieren zu suchen, wenn etwas anderes in der Art und Weise meiner h1-Kontaktklasse ist, aber es war nicht

Konnte mir jemand helfen? Vielen Dank!

~ Justin van Dongen

EDIT

Element untersuchen 'Stile' in Chrome von der H1-Tag:

.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

Hier sind einige Links das kann nützlich sein:

JSFiddle: https://jsfiddle.net/justinvandongen/8Lyowreo/ Projekt: http://justthinq.justinvandongen.nl

Answer 1

Das hier Problem einfach ist oder verlegt Schließung </div> fehlt. Die eine, die die h1 nach rechts ausrichten verursacht, ist nach der letzten col-sm-6 div, aber Sie haben auch eine fehlende <div id="01">, so dass die <div id="02" darin verschachtelt ist. Ich würde empfehlen, Ihr HTML durch einen Parser laufen zu lassen, um irgendwelche anderen fehlenden schließenden Elemente zu überprüfen.

Ich fügte auch einen Clearfix zum <div id="02" class="clearfix"> hinzu, um sicherzustellen, dass das div eine Höhe hat, die den Kontaktabschnitt an der Unterseite zwingt, an der richtigen Stelle zu beginnen.

Dieser JSFiddle sollte abdecken, was wir besprochen haben. Ich habe es gerade basierend auf deinem letzten Kommentar aktualisiert.

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