text-align: center; дает мне и выравнивание текста: справа; Зачем?

Question

Я работаю над небольшим проектом, детали не имеют значения. Т: P

Но я создаю несколько div для нескольких категорий. Как Сервисы, Контакт и т. Д.

Но я пытаюсь выровнять свой <h1 class="h1-contact">. Но это не работает для somereason.

Я уже пробовал смотреть на другие темы с этим вопросом, но почему-то эти ответы не сработали для меня.

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-контактного класса, но не было

Может ли кто-нибудь помочь мне? Большое спасибо!

~ Джастин ван Донген

EDIT

Элемента инспектировать 'стили' в 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; 
    } 

ДРУГОГО EDIT

Вот некоторые ссылки что может пригодиться:

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 через анализатор, чтобы проверить любые другие отсутствующие закрывающие элементы.

Я также добавил clearfix для <div id="02" class="clearfix">, чтобы убедиться, что div имеет высоту, заставляющую контактную секцию внизу начинать в нужном месте.

Этот JSFiddle должен охватывать то, что мы обсуждали. Я только что обновил его на основе вашего последнего комментария.

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