Aligning ion-item to the left, flush with block button

I have the following page in my app:

I am trying to get the input field to align with the block button on the left (as you can see it is offset a little). The same issue appears in other parts of the app with different items. Here is the HTML:

<ion-content padding class="background">
      <ion-row id="blank1"></ion-row>
          <ion-label floating>Room Code</ion-label>
          <ion-input class="input" id='roomInput' type="text" [(ngModel)]="roomCode"></ion-input>
      <ion-row id="blank2"></ion-row>
        <button ion-button block (click)="isCorrectRoomInput(this.roomCode, this.idList)">Enter Room</button>
        <p id='output'></p>

I have tried things like changing the padding or the left-margin using CSS. Can anyone help?

Inspect the HTML and see where the left padding or distancing comes from, then overwrite and change that value somehow.

1 Like