CSS - Not applying media query

Question

I wrote media query for my HTML code, but not applying. I have to show my text in center in small screen.

 @media(max - width: 400 px) { h1 { text - align: center; } } 

 <h1>Search for a Doctor or Care Provider</h1> 

How to fix?

Answer 1

The problem that @Zvezdas1989 is removing is that you had a space between 400 and px, they need to be together, just like the max-width and the text-align .

@media(max-width: 400px) {
    h1 {
      text-align: center;
    }
}

So that will fix the problem.

Answer 2

It's not applying because of the spaces, you need to remove those in order to make it valid:

 @media (max-width: 400px) { h1 { text-align: center; } } 

 <h1>Search for a Doctor or Care Provider</h1> 

Answer 3

You need to remove the spaces, like this:

 @media (max-width: 400px) { h1 { text-align: center; } } 

 <h1>Hello Friends</h1>