<div class="pages">
   <a href="#">First</a>
   <a href="#">«</a>
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">»</a>
   <a href="#">Last</a>
</div>

.pages {    
   background-color: #f54242;  
   border-radius: 25px;    
   margin: 0px auto 0px auto;    
   padding: 7px 0px 7px 5px;  
}    

.pages a {    
   color: #fff;    
   padding: 4px 10px 4px 10px;    
   border-radius: 25px;    
   text-align: center;  
   font-weight: 600;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}    

.pages a:hover {    
   background-color: #fff;    
   color: #f54242;    
   -webkit-transition: 0.3s;    
   transition: 0.3s;  
}

Arkadaşlar kodlar yukarıdaki gibi sorun ise aşağıda resimde belirtilmiş. Bilgisayardan girince farklı, mobilden girince farklı görünüyor. Doğru görünüm mobilde ki gibi. Bilgisayardan girince son a etiketi ile .pages içeren div arasında sanki padding-right varmış gibi davranıyor tarayıcı ama aslında yok. .pages sınıfına baktığımızda "padding: 7px 0px 7px 5px;" yazıyor. Sağ iç boşluk 0 olmasına rağmen, sol iç boşluk 5px'den daha geniş duruyor. Resim olarak bilgisayar ve mobil görünümleri aşağıdadır.

Bilgisayar: https://i.hizliresim.com/5ybdnz.png
Mobil: https://i.hizliresim.com/pnlgNr.png

Not: Farklı bilgisayar ve telefonlarda denedim sonuç aynı. Bilgisayarda iken telefon genişliğine getirince bir şey değişmiyor. Telefondan giriş yapmak lazım. Localhost üzerinde çalıştığım için site adresi veremiyorum.