Почему мой css применяет только половину div

Question

Почему половина моего css кода работает только на половине div? это мой код

#cardleft h1{
  margin-top: 25px;
  text-align: center;
  font-size: 40px;
  line-height: 40px;
  position: relative;
  left: 0px;
}

#cardleft{
  border: 2px solid #68C3A3;
  margin-right: 10px;
  border-radius: 30px 0px 0px 30px ;
  color: #4aa0c2 !important;
}
  
#cardleft:hover{
  background-color: #4eb28f;
  color: gold !important;
}

<div id="cardleft" class="col-md-4 ">
  <div class="col-md-3">
    <i class="fab fa-linkedin fa-6x"></i>  
  </div>
  <h1>LinkedIn</h1>
</div>

Я пытался сделать это несколькими способами, но проблемы все еще возникают. попытался добавить !important, но ничего не изменилось.

но, как ни странно, тот же код работает в codepen.io

Я что-то не так делаю в IDE? Я использую визуальный студийный код

Answer 1

Может быть, вам просто нужно создать уникальные имена для классов css в этом файле HTML? Похоже, цвет текста перезаписывается где-то еще из-за имен классов.

Answer 2

#cardleft h1{
  margin-top: 25px;
  text-align: center;
  font-size: 40px;
  line-height: 40px;
  position: relative;
  left: 0px;
}
#cardleft h1, #cardleft i{
  color: #4aa0c2;
}
#cardleft{
  border: 2px solid #68C3A3;
  margin-right: 10px;
  border-radius: 30px 0px 0px 30px ;
}
  
#cardleft:hover{
  background-color: #4eb28f;
}

#cardleft:hover h1, #cardleft:hover i{
  color: gold !important;
}

<div id="cardleft" class="col-md-4 ">
  <div class="col-md-3">
    <i class="fab fa-linkedin fa-6x"></i>  
  </div>
  <h1>LinkedIn</h1>
</div>

Вам необходимо добавить цветовой стиль в тег h1.