I have the following code:

```css
#containerScroll {
  height: 5em;
}

scroll {
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}
```

```html
<div id="containerScroll">
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</div>
```

On my end, the output is looking like this:

[![enter image description here](https://i.stack.imgur.com/gTXjr.png)](https://i.stack.imgur.com/gTXjr.png)

This is exactly what I want since the scroll down button is aligned right on top of the text and I achieved this by setting `left: calc(52.3% - 1em) !important;`. On my end, this property is whats making it align perfectly on top of the text.

The problem is that when I zoom out, I'm getting this output:

[![enter image description here](https://i.stack.imgur.com/BlMQs.png)](https://i.stack.imgur.com/BlMQs.png)

As you can see, the scroll button alignment changes and its moved towards the right, and it is because of the `left: calc(52.3% - 1em) !important;` property I'm pretty sure. But I do not want to change or remove this property since this is whats making it align perfectly on `100% zoom`. Is there a way to make this fixed? For example, when I zoom out on the website, the scroll button alignment does not change and remains constant? Any suggestions?