Why margin doesn't work with class selector after previous styles?

Question

Why margin doesn't work with class selector after previous styles?

Sorry for extra code, I don't know how to insert bootstrap into the snippet :)

 .menu a { margin: 0px 6.5px} .startAproject { margin-left: 100px; /* This propertie doesn't work*/ background-color: green; } /* But this works well*/ 

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="menu"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link uppercase outline">Blog</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline">Work</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline startAproject">Start a project</a> </li> 

Answer 1

.menu a {
  margin: 0px 6.5px
}

The above codes are overriding the

.menu a {
  margin: 0px 6.5px
}
.startAproject {
  background : red ;
  margin-left: 100px !important; /* use !important t make it work */      
}

---

solution : use !important

 .menu a { margin: 0px 6.5px } .startAproject { background : red ; margin-left: 100px !important; /* use !important to make it work */ } 

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="menu"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link uppercase outline">Blog</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline">Work</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline startAproject">Start a project</a> </li> 

---

Here is reference to !important

Answer 2

It does work, however the class is being overridden by the id because of the rules of specificity.

From CSS-Tricks on specificity :

Why is that our first attempt at changing the color and font-weight failed? As we learned, it was because simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.

 .startAproject { margin-left: 100px; } #startAproject { /*margin-left: 100px */ } 

 <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <div class="menu"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link uppercase outline">Blog</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline">Work</a> </li> <li class="nav-item"> <a class="nav-link uppercase outline startAproject" id="startAproject">Start a project</a> </li>