'It disperses when I zoom in or out

I have a div and a lot of tags in it, but when I zoom the div in or out it disperses. If you look at the images when I zoom News it doesn't disperse but when I do the same thing to Log it does. The tags that are in the div I want to make them all in one.

Image One

Image Two

.Panels {
  margin-top: 100px;
  margin-bottom: 120px;
  margin-left: 200px;
  margin-right: 200px;
  position: relative;
  .News {
    zoom: 0.5;
    #pnl1 {
      width: 700px;
      float: left;
    }
    #header {
      left: 14px;
      top: -10px;
      position: absolute;
    }
    #bell {
      cursor: pointer;
      top: -6px;
      left: 630px;
      position: absolute;
    }
    #eye {
      cursor: pointer;
      top: -6px;
      left: 590px;
      position: absolute;
    }
    #heart {
      cursor: pointer;
      top: -6px;
      left: 550px;
      position: absolute;
    }
  }
  .Log {
    zoom: 0.5;
    #pnl2 {
      width: 360px;
      float: right;
    }
    #header2 {
      top: -10px;
      left: 795px;
      position: absolute;
    }
    #content {
      top: 60px;
      left: 860px;
      position: absolute;
    }
  }
}
<body>
  </section>
  <div class="Panels">
    <div id="div" class="News">
      <i id="bell" style="font-size: 1.3rem" class="far fa-bell"></i>
      <i id="eye" style="font-size: 1.3rem" class="far fa-eye"></i>
      <i id="heart" style="font-size: 1.3rem" class="far fa-heart"></i>
      <div id="header" style="font-size: 20px">-News-</div>
      <img src="Media/NewsPanel.svg" id="pnl1" />
    </div>

    <div id="div" class="Log">
      <div id="header2" style="font-size: 20px">-Update Log-</div>
      <p style="text-align: center" id="content">Website Released!</p>
      <img src="Media/LogPanel.svg" id="pnl2" />
    </div>
  </div>
  <section>
</body>
htmlcsssass


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions