Search code examples
htmlcsstwitter-bootstrap

Bootstrap navbar brand left margin not overriding

I'm trying to override the left margin of the bootstrap class navbar-brand like so

.navbar .navbar-brand{
  margin-left: 15px;
  background: url("../img/logo.png") no-repeat;
}

Basic stuff right ? Well as I remember from my training is the class that is last in the list of classes, it's properties get set. Now in this case it just won't take my override in my main.css file. I've tried different selectors, different positions in the class list. I even tried different class names. As it is like always in CSS I'm probally missing something tiny small I can't seem to think of now or maybe it's something major I have never encountered before.

enter image description here enter image description here

Anyway can someone point me in the right direction here ? This has been driving me nuts for the past 2 days now. I'll attach my files below.

main.html & main.css

Solution

  • The problem is likely related to CSS specificity. You have a more specific selector that's setting that element's margin. You can confirm this by setting margin-left: 15px!important;

    If the margin-left take effect after that, it's a specificity issue, if not you know it's something else.

    You can resolve specificity issues by making your selectors more specific or other selectors less specific (or you can cheat it by putting your styles inline via style attribute or using !important).

    Edit: As you can see from your devtools screenshot, your class is definitely less specific than the one from Bootstrap. This should work:

    @media (min-width:768px){
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
  }
}