div的位置在不同的屏幕分辨率上变化

Question

当我执行以下操作时，如果我在具有更高分辨率的屏幕上打开，则包含在div中的图像（用作链接）会改变位置。我怎么解决这个问题？

HTML：

    <div class="image-links">
   <ul>
     <li>
<a href="">
   <img src="images/rooms.png" alt="the rooms" width="inherit">
 </a>
</li>
<li>
 <a href="">
    <img src="images/dive-site.png" alt="dive site" width="inherit">
  </a>
</li>
<li>
  <a href="">
     <img src="images/food.png" alt="food" width="inherit">
   </a>
 </li>
 </ul>
 </div>

CSS：

.image-links{
width: 300px;
float: right;
position: absolute;
right: 3em;
top: 32.5em;
font-size: 20px;
margin: 20%;
}