放大和缩小时，布局变得混乱

Question

我在浏览器上进行参考125%缩放的同时设计了此页面。但是当我缩小或放大时，我的布局变得混乱。左列未更改，但其他列已更改。

我应该重新设计此页面吗？还是我们可以找到解决方案？

有人说不要将px与margin一起使用，而我没有。

除了使用125%缩放外，我想将浏览器的缩放级别更改为125%。

zoom();

function zoom() {
  document.body.style.zoom = "125%" 
}

-@media screen and (min-width:1000px) {
  body {
      background-image: url(kupa/kupawall1.jpg);
      background-color: burlywood;
      background-size: cover;
      background-attachment: fixed;
    }

  .buton {
    margin: 0.6cm;
    border-radius: 40%;
    background-color: aqua;
    border-style: double;
  }

  .buton2 {
    lighting-color: aliceblue;
    padding: 2%;
    border-radius: 15%;
    text-align: center;
  }

  .image {
    border-radius: 80%;
  }

  #baslık {
    padding-left: 40%;
    background-color: antiquewhite;
  }

  #altBas {
    margin: 2%;
    font-size: 90%;
  }

  #kupaIcon {
    margin-left: -1%;
    margin-top: 0.3%;
  }

  #kupabuton {
    margin-top: 0.3%;
    margin-left: 0.8%;
  }

  #madalyabuton {
    margin-left: 20%;
  }

  #madalyaIcon {
    margin-top: -17%;
    margin-left: 20%;
  }


  #porselenIcon {
    margin-left: 60%;
    margin-top: -17%;
  }

  #porselenButon {
    margin-left: 60.5%;
  }

  #kristalButon {
    margin-top: 0;
    margin-left: 40%;
  }

  #kristalicon {
    margin-top: -17.5%;
    margin-left: 39%;
  }

  #camicon {
    margin-left: 80%;
    margin-top: -17%;
  }

  #Ignebuton {
    margin-left: 31%;
  }

  #IgneIcon {
    margin-left: 30%;
  }

  #OzelIcon {
    margin-left: 10%;
    margin-top: -17.3%;
  }

  #Ozelbuton {
    margin-left: 9%;
  }

  .sayfaDuzen {
    margin-top: -9%;
  }

  #anahtarIcon {
    margin-left: 50%;
    margin-top: -17%;
  }

  #anahtarButon {
    margin-left: 50%;
  }

  #rozetIcon {
    margin-left: 70%;
    margin-top: -17%;
  }

  #rozetButon {
    margin-left: 71%;
  }
}

<h1 style="color:chocolate" id="baslık"><strong> AKTÜRK REKLAM</strong></h1>
<pre id="altBas"><b><em>SİZ HAYAL EDİN BİZ GERÇEKLEŞTİRELİM</em></b></pre>
<hr />

<a href=index.html>  <button class ="buton2" id="anasayfa">Anasayfa</button></a>
<a href=hakkımızda.html>  <button class ="buton2" id="anasayfa">Hakkımızda </button></a>
<a href=iletisim.html>  <button class ="buton2">İletişim</button></a>
<hr />

<!-- Should contain <li>'s, pointless use of <ul> -->
<ul>
  <br><br> <br><br> <br>

  <div class="sayfaDuzen">
    <a href="kupalar.html">
      <div id="kupaIcon">
        <img src="kupa/kupa15.jpg"  class="image" width="130" height="130"/>
      </div>
      <div id="kupabuton">
        <button class="buton">Ödüller</button>
      </div>
    </a>
    <a href="madalyalar.html">
      <div id="madalyaIcon">
        <img src="madalya/madIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="madalyabuton">
        <button class="buton">Madalyalar</button>
      </div>
    </a>
    <a href="porselenler.html">
      <div id="porselenIcon">
        <img src="porselen/plaketIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="porselenButon">
        <button class="buton">Plaketler</button>
      </div>
    </a>
    <a href="kristaller.html">
      <div id="kristalicon">
        <img src="Kristal/kristal1.jpg"  class="image" width="130" height="130"/>
      </div>
      <div id="kristalButon">
        <button class="buton">Kristaller</button>
      </div>
    </a>
    <a href="camlar.html">
      <div id="camicon">
        <img src="camlar/camicon.jpg"  class="image" width="130" height="130"/>
        <div id="cambuton"></div>
        <button class="buton">Camlar</button>
      </div>
    </a>
    <a href="ıgneler.html">
      <div id="IgneIcon">
        <img src="ıgneler/ıgneIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="Ignebuton">
        <button class="buton">İğneler</button>
      </div>
    </a>
    <a href="ozel.html">
      <div id="OzelIcon"><img src="ozelPDF/ozelIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="Ozelbuton">
        <button class="buton">Özel Madalyalar</button>
      </div>
    </a>
    <a href="anahtar.html">
      <div id="anahtarIcon">
        <img src="anahtarlık/anahIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="anahtarButon">
        <button class="buton">Anahtarlıklar</button>
      </div>
    </a>
    <a href="rozetler.html">
      <div id="rozetIcon">
        <img src="rozet/rozetIcon.jpg" class="image" width="130" height="130"/>
      </div>
      <div id="rozetButon">
        <button class="buton">Rozetler</button>
      </div>
    </a>
  </div>
</ul>

<h6>content</h6>