Justin van Dongen Justin van Dongen - 4 months ago 13
HTML Question

text-align: center; gives me and text-align: right; why?

I am working on a little project, the details don't really matter tho :P

But I am creating multiple div's for multiple 'categories'. Like Services, Contact etc.

But I am trying to align my

<h1 class="h1-contact">
. But it doesn't work for somereason..

I already tried looking in to other topics with this question, but somehow those answer didn't work for me.

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>


I already tried to look in Element Inspect to look if something else was in the way of my h1-contact class, but it wasn't

Could anyone help me out? Thank you very much!

~ Justin van Dongen

EDIT

Element inspect 'styles' in Chrome of the 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

Here are some links that may come in handy:

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

Answer

The problem here is simply missing or misplaced closing </div>. The one that is causing the h1 to right align is after the last col-sm-6 div, but you also have one missing from <div id="01">, so the <div id="02" is nested inside of it. I would recommend running your html through a parser to verify any other missing closing elements.

I also added a clearfix to the <div id="02" class="clearfix"> to ensure that the div has a height forcing the contact section at the bottom to start in the right spot.

This JSFiddle should cover what we have discussed. I just updated it based on your last comment.

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