I'm writing Angular code in which I have two buttons in the same size in web normal size, but when it comes to responsive mode the size changes and a button becomes bigger than the other. I tried to adjust them by changing padding-right and padding-left but if it works correctly in a mobile type for example IphoneX it did not work correctly in other mobile type such us Google pixel.

that's my code to adjust them in mobile version

@media (max-width: 480px) {
  #conseller{
    padding-right: 9%; 
    padding-left: 9%;
  }
 #button {
    padding-right: 18%; 
    padding-left: 18%;
  }
}

that's the code in HTML

<div class="feature-list-button-box mt-30 text-center">
                        <a style="color:white;" id="conseller" [routerLink]="[ '/contact' ]" class="ht-btn ht-btn-md">Parler à un
                            conseiller</a>
                        <a [routerLink]="[ '/service_suite' ]" id="button" class="ht-btn ht-btn-md ht-btn--outline">Nos
                            Services</a>
                    </div>

and this is how they look in web version:

and this is how they look in mobile version: