サイズ変更時にdivにポイントが残りません

Question

ウィンドウのサイズを変更すると、サークルはすべて同じウィンドウを基準にしていても完全にはずれます。何故ですか？ 同じ方法で配置され、サイズは％です。 何か助けていただければ幸いです。

HTML：

<div id="product-right"> 
    <div id="circle-container"> 
     <div id="circle-1" class="circle" onclick="changeparagraph1()"></div> 
     <div id="circle-2" class="circle" onclick="changeparagraph2()"></div> 
     <div id="circle-3" class="circle" onclick="changeparagraph3()"></div> 
     <div id="circle-4" class="circle" onclick="changeparagraph4()"></div> 
     <div id="circle-5" class="circle" onclick="changeparagraph5()"></div> 
     <div id="circle-6" class="circle" onclick="changeparagraph6()"></div> 
     <div id="circle-7" class="circle" onclick="changeparagraph7()"></div> 
     <div id="circle-8" class="circle" onclick="changeparagraph8()"></div> 
     <img src="img/gun.svg" alt="gun"> 
    </div> 
</div> 

はCSS：htmlコードの編集にimgタグは `する`で：

#product #product-right { 
    height:100%; 
    line-height:100%; 
    float:left; 
    width:50%; 
    position:relative; 
} 

#product-right img { 
    height:100%; 
    width:100%; 
    display:block; 
    margin:0 auto 0 auto; 
    pointer-events: none; 
} 

#circle-container { 
    height:80%; 
    width:80%; 
    position:relative; 
    margin:3vw 10% 0 10%; 
    overflow:hidden; 
} 

.circle { 
    position: absolute; 
    cursor: pointer; 
    width: 11px; 
    height: 11px; 
    border-radius: 50%; 
    background-color:#666666; 
    border: 5px solid transparent; 
    box-shadow: 0 0 0 1px #666666; 
    background-clip: padding-box; 
} 

#circle-1 { 
    top:5vw; 
    right:7vw; 
} 

#circle-2 { 
    top:22.5%; 
    right:27.5%; 
} 

#circle-3 { 
    top:22.5%; 
    right:22.5%; 
} 

#circle-4 { 
    top:31%; 
    left:37.5%; 
} 

#circle-5 { 
    top:22.5%; 
    right:17.5%; 
} 

#circle-6 { 
    top:50%; 
    left:32.5%; 
} 

#circle-7 { 
    top:82%; 
    left:24%; 
} 

#circle-8 { 
    top:9%; 
    left:28%; 
} 

Answer 1

<div id="product-right"> 
     <div id="circle-container"> 
     <table> 
      <tr> 
      <td> 
      <div id="circle-1" class="circle" onclick="changeparagraph1()"></div></td> 
      <td> 
      <div id="circle-2" class="circle" onclick="changeparagraph2()"></div></td> 
      <td> 
      <div id="circle-3" class="circle" onclick="changeparagraph3()"></div></td> 
      <td> 
      <div id="circle-4" class="circle" onclick="changeparagraph4()"></div></td> 
      </tr> 
     </table> 
     </div> 
    </div>