CODEWITHSUNDEEP
htmlcsstext-align
Justin van Dongen
Justin van Dongen

Reputation: 97

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

Upvotes: 0

Views: 228

Answers (1)

Khris Roberts
Khris Roberts

Reputation: 335

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/

Upvotes: 1

Related Questions