サブカテゴリとカテゴリ分割の間のスペースを削除するにはどうすればよいですか？

Question

.category-list { 
 
    width: 20%; 
 
    margin-left: 50px; 
 
    position: fixed; 
 
    top: 50px; 
 
} 
 

 
#subcat1 { 
 
    width: 50%; 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 350px; 
 
}

<div class="category-list" id="list-category"> 
 
    <div class="list-group"> 
 
    <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';">First item</a> 
 
    <div class="subcat" id="subcat1" style="display:none;" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';"> 
 
     <div class="list-group"> 
 
     <a href="#" class="list-group-item">Second item</a> 
 
     <a href="#" class="list-group-item">Third item</a> 
 
     <a href="#" class="list-group-item">First item</a> 
 
     <a href="#" class="list-group-item">Second item</a> 
 
     <a href="#" class="list-group-item">Third item</a> 
 
     <a href="#" class="list-group-item">First item</a> 
 
     <a href="#" class="list-group-item">Second item</a> 
 
     <a href="#" class="list-group-item">Third item</a> 
 
     <a href="#" class="list-group-item">First item</a> 
 
     <a href="#" class="list-group-item">Second item</a> 
 
     <a href="#" class="list-group-item">Third item</a> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

私がヒットして、適切な左のインデックスを作成する場合は、2つのSUBCAT部門とカテゴリdivisonは、間に少しスペースを取得しているが、私はそれが応答ネスのためにチェックされているときにそれらも添付したいと試してみると、スペースが取り除かれますが、応答性があるかどうかを確認するときに再び現れます。 位置固定の代わりに何を使用して、両者を固定しておくことができますか？何のことをいっているのスペース

Answer 1

.category-list{ 
 
    width:20%; 
 
    margin-left:50px; 
 
    position: relative; 
 
    top:50px; 
 
    
 
    
 
} 
 
#subcat1{ 
 
    width:50%; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0 
 
}

<div class="category-list" id="list-category"> 
 
       <div class="list-group"> 
 
       <a href="#" class="list-group-item" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';" >First item</a> 
 
       <div class="subcat" id="subcat1" style="display:none;" onmouseout="document.getElementById('subcat1').style.display = 'none';" onmouseover="document.getElementById('subcat1').style.display = 'block';"> 
 
         <div class="list-group"> 
 
          <a href="#" class="list-group-item">Second item</a> 
 
          <a href="#" class="list-group-item">Third item</a> 
 
          <a href="#" class="list-group-item">First item</a> 
 
          <a href="#" class="list-group-item">Second item</a> 
 
          <a href="#" class="list-group-item">Third item</a> 
 
          <a href="#" class="list-group-item">First item</a> 
 
          <a href="#" class="list-group-item">Second item</a> 
 
          <a href="#" class="list-group-item">Third item</a> 
 
          <a href="#" class="list-group-item">First item</a> 
 
          <a href="#" class="list-group-item">Second item</a> 
 
          <a href="#" class="list-group-item">Third item</a> 
 
         </div> 
 

 
       </div> 
 
</div> 
 
</div>