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>

Solution

.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