Am struggling to increase the height of nav bar im...

# javascript

[Tarun Chawla]

Am struggling to increase the height of nav bar image. Am using bulma css. Am I missing something here? Just need to increase the width/height of image.
Index html file:

fun HTML.index() {
  head {
    title("Welcome to Seller Service")
    link(rel = "stylesheet", href = "<https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.css>") { }
    link(rel = "stylesheet", href = "static/styles/index.css") {}
  }
  body {
    div {
      id = "index"
    }
    script(src = "/static/output.js") {}
    script(src = "<https://use.fontawesome.com/releases/v5.3.1/js/all.js>") {}
  }
}

Index component where am overriding index div:

override fun RBuilder.render() {
    div(classes = "section") {
      div(classes = "container") {
        nav(classes = "navbar") {
          div(classes = "navbar-brand"){
            a(classes = "navbar-item"){
              img(classes = "img-style", src = "static/images/logo-text.png", alt = "Site logo") {
              }
            }
          }
        }
      }
    }
  }
}

Below is the img-style inside index.css:

.img-style {
    max-height:300px;
}

In console am seeting this:

.navbar-item img {
    max-height:1.75rem
}

.img-style {
    <strike>max-height:4rem;</strike>
}

[Tarun Chawla]

I got it working this way:

.navbar-item > img {
    max-height: 4rem;
}

Any other suggestion better than this, please let me know.