html css twitter-bootstrap media-queries

'@media' doesn't affect my Jumbotron header

Hello I've just started web development a few days ago. I want my web page's header to be responsive so its width, height, font-size be flexible.

<header class="text-white">
<div class="jumbotron bgimg text-white">
  <h1 class="display-4">    
    <i class="fa fas fa-star"></i>
    Hello, World!<i class="fa fas fa-star fa-1x"></i></h1>
  <p class="lead">This is my webpage</p>
  <hr class="my-4">
  <p class="lead">Web page details.</p>
  <a class="btn btn-primary" href="./file.zip" download="" role="button">Download!</a>
</div>

So I wrote the code like this so that my letter size will be printed small on a small mobile device. My problem is it stays the same and my background image randomly cropped. Is it because I set display-4 on h1?

@media (max-width: 400px) {
  #headerh1 {
    width: 100%;
    height: 10%;
    font-size: 2em;
  }
}

Thank you, for always.

Solution

Issue is with selector simple Use

h1{
    width: 100%;
    height: 10%;
    font-size: 2em;
}

h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

or more precisely

header h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }