Div定位在主容器div内的另一个div（重复）内

Question

我的要求是

1. 我希望我的团队与团队所有者一起上市。我有一个列表组件，其中包含许多卡组件。
2. 每张卡片都包含团队所有者图片（位于左端），后面是团队所有者名称，以及卡片右端的箭头
3. 如果用户想要查看详细信息，则可以单击每张卡片右端显示的箭头。

我的template.html内容如下

<div class="list">
    <div class="card" ontouchstart="this.classList.toggle('hover');">
        <div class="avatar">
            <img src="/img/csk.jpg"></img>
            <h5><strong>Raghav</strong></h5>
            <div class="section">
                <i class="icon assertive ion-heart">18</i>
                <i class="icon ion-chatbubbles positive-900">2</i>
            </div>
        </div>
    </div>
    <div class="card" ontouchstart="this.classList.toggle('hover');">
        <div class="avatar">
            <img src="/img/dd.jpeg"></img>
            <h5><strong>Subramaniyan</strong></h5>
            <div class="section">
                <i class="icon assertive ion-heart">5</i>
                <i class="icon ion-chatbubbles positive-900">10</i>
            </div>
        </div>
    </div>
</div>

我的样式表如下

.list {
    position: absolute;
    background-color : #607;
    top: 0 px;
    width: 100 % ;
    height: 100 % ;
}
.card {
    background - color: #BFF;
    position: relative;
    top: 2 % ;
    padding - left: 10 % ;
    padding - bottom: 15 % ;
    padding - right: 80 % ;
    margin: 5 % ;
    border - radius: 2 % ;
    overflow: hidden;
}
.card:hover, .card.hover {
      transform: rotateY(180deg);
      padding-bottom: 50.25%;
}

.avatar {
    position: relative;
    padding: 20 % ;
    background - color: #0E0;
}

.avatar > h5{
  position : relative; 
  width:100%; 
  left : 25%;
  top : 0%;
  padding-top:5%;   
}

.avatar img{
  position : absolute;
  left : 5%;
  top : 25%;
  float : left;
  border-radius:50%;
  width :15%;
  height :auto;
  max-height : 50%;     
}
.avatar .section{
  position : relative; 
  top : 30%;
  left :50%;
  width :150px;
  height : auto;    
}
.avatar > .section > *{
  left : 30%;
  width : 50%; 
  padding-right:5px;   
}

.avatar .arrow{
  position : relative;  
  border-radius:50%;
  width : 20%;
  height : 20%;
  float : right;
}

错误：

当我运行

时，我无法在页面中看到<div class="avatar">