Padding button looks even on browser inspector, but not on phone

Every time I write a primeng button for some reason in the browser inspector (even when it´s on phone view) the padding (or text) of the button looks centered:

However in my phone Google Chrome does not display it like that:

Why does that happen? Here are all the parts of said trouble:

Html structure of the parent node and buttons itself:

<form class="cloud" id="login-form" [formGroup]="loginForm" (ngSubmit)="submitLoginForm()"> <div> <span class="pi pi-user" style="font-size: 0.8em"></span> <input pInputText id="username" autocomplete="off" formControlName="username" placeholder="Nombre de usuario"/> </div> <div> <span class="pi pi-lock" style="font-size: 0.8em"></span> <input pInputText id="password" autocomplete="off" formControlName="password" placeholder="Contraseña" type="password"/> </div> @if(loginForm.getError('loginFailed')) { <div class="div-mensaje-error"> <span class="mensaje-error">{{ loginForm.getError('loginFailed') }}</span> </div> } <p-button label="Iniciar Sesión" class="green-button w-100" (onClick)="submitLoginForm()" /> <p-button label="Crear cuenta" class="green-outlined-button w-100" routerLink="/accountCreation/firstStep" /> </form>

Scss rules of the parent node:

@use '../../../shared/styles/generalStyles/mixins' as mixins; :host { display: block; margin: 0 auto; } form#login-form { background-color: #F5F5F5; display: grid; grid-template-columns: 1fr; gap: 12px; } form#login-form > div { /* Fixed width was set to prevent the form go wide all across the window width*/ width: 320px; display: grid; grid-template-columns: auto 1fr; gap: 15px; justify-content: center; align-content: center; align-items: center; input { font-size: 20px; } @include mixins.change-layout(phone) { width: 250px; } } span.mensaje-error { font-size: 21px; color: red; }

Scss rules of the green button (Outlined button rules are the same, but changing colors):

p-button.green-button { width: fit-content; } p-button.green-button.w-100 { width: 100%; > button.p-button, > button.p-button:not(:disabled):hover { width: 100%; } } a.p-button.green-button.p-component, a.p-button.p-component:not(:disabled):hover, p-button.green-button > button.p-button, p-button.green-button > button.p-button:not(:disabled):hover { background-color: green; border-color: green; padding: 5px 15px; border-radius: 8px; > span { color: white; font-size: 21px; } }

Is there any particular quirk about the chrome phone browser that I should know? I am running the latest Chrome version in Android 16