Ломается верстка при масштабе 25-33%

Cверстал страницу, всё работает, но когда я меняю масштаб до 25% - 33%, то вёрстка частично ломается, подскажите в чем беда?

В браузере Edge и IE 11 таких проблем нет, а вот Хром, Опера, Мазилла, Яндекс браузеры ломают верстку.

.button {
background-color:#ee8129;
padding:10px 86px;
position:relative;
left: 8px;
top: 15px;
text-decoration:none;
color:#fff;
background-image: linear-gradient(bottom, rgb(238,129,41) 0%, rgb(238,130,51) 100%);
box-shadow: inset 0px 0px 0px #b3560b, 0px 6px 0px #b3560b;
border-radius: 4px;
text-transform: uppercase;
font-weight: bold;

}

.button:hover { 
left: 8px;
top: 20px;
box-shadow: inset 0px 0px 0px #b3560b, inset 0px -1px 0px #b3560b;
color: #fff;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
background: rgb(238,129,41);
text-transform: uppercase;
font-weight: bold;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.3));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.4));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(300, 0, 0, 0.3));

}

<div>
<a href="#" class="button">Enroll Today</a>
</div>