Why is my image so large now?

I’m a mid level back end dev who always tries to figure things out on my own and usually do figure them out, but there’s something about the power of writing your problem out! It’s probably been said before, but it’s like rubber-ducking.

Anyhow, all of the sudden my boostrap (god, I can never spell that word), booTstrap, image styled with the .brand class is gigantic and covering the whole screen.

When I Chrome inspect it, I am looking for the styles related to width and size and cannot find them. I go and uncheck all sorts of rules to see what changes, and the size doesn’t change!

<%= link_to( (image_tag "Hockey_Protege_A_white.png", alt: "brand"), root_path, class: "navbar-brand" ) %>

Update 1

On a branch that is working, I found the CSS that it uses and unchecked it and sure enough it looked just like it did on the broken branch.

.app-navbar .navbar-brand img {
    width: 85px;
}

Ok, so I realized I mistakenly did not copy over the Application level styles into the application.scss 🙁

Once I added this in (which a user already suggested but deleted their answer because I said I wanted it to work “out of the box” and mistakenly thought I didn’t need any extra styling 🙁 ), it worked:

.app-navbar .navbar-brand img {
  width: 85px;
}

I’m still confused though because bootstrap (gem ‘bootstrap’, ‘~> 4.0.0.beta’) stylesheets were loading and they have a .navbar-brand class so if it wasn’t finding the styles in the application.scss, why couldn’t it just find them in @import “bootstrap”;?