H1 in a div class is not working. not sure why

Question

i am using .section-title h1 in my css to and align the text to centre but it doesnt work but it surely work if i just use h1 to align text.

<div id="section-title">
    <h1>GET IN TOUCH</h1>
    <p>Make sure to subscribe to this channel</p>
</div>

For the CSS I have tried

h1.section-title {
    text-align: center;
}

and

.section-title h1
{
    text-align: center;
}

section-title is the ID of the H1. So please use # instead of . in your css — Azeez Kallayi, Oct 29 '19 at 06:49
That is because you assigned it as an ID but in your css, you are calling it as a class, thus , there is no such class. Change the `.` to `#` in your css . eg; `#section-title h1` — Gosi, Oct 29 '19 at 06:49

score 1 · Answer 1 · answered Oct 29 '19 at 07:22

1

Answer:

Instead of using Class selector replace with ID selector(#).

#section-title h1
{
    text-align: center;
}

answered Oct 29 '19 at 07:22

Upender Sanga

Jan Dolejsi · Answer 2 · 2019-10-29T15:39:24.770

0

There are two options:

Option1 using a div class:

<div class="section-title">
    <h1>GET IN TOUCH</h1>
    <p>Make sure to subscribe to this channel</p>
</div>

.section-title h1 
{
    text-align: center;
}

Or option2 using the h1 ID:

<div>
    <h1 id="section-title">GET IN TOUCH</h1>
    <p>Make sure to subscribe to this channel</p>
</div>

and

h1#section-title
{
    text-align: center;
}

edited Oct 29 '19 at 15:39

answered Oct 29 '19 at 06:47

Jan Dolejsi

Because there are fundamental differences between classes and IDs in html/css. You are using an id so you have to use Id selector. – cloned Oct 29 '19 at 07:00

score 0 · Answer 3 · answered Oct 29 '19 at 06:51

Please try this

'section-title' is the ID of the H1. So please use '#' instead of '.' in your css

h1#section-title
{
    text-align: center;
}

<div>
    <h1 id="section-title">GET IN TOUCH</h1>
    <p>Make sure to subscribe to this channel</p>
</div>

3 Answers3