텍스트 정렬 : 가운데; 나에게 줄 텍스트 정렬 : 오른쪽; 왜?

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 접촉 클래스의 방법 인 경우보고 요소 검사에보고했지만, 그것은 아니 아니

누구 도와 줄래? 고마워요!

~ 저스틴 반 Dongen

편집

요소가 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/