为什么我的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中做错了吗？我正在使用Visual Studio代码

Answer 1

#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标签添加颜色样式。