I am not sure why my page is offset like this

Question

<div>
  <div>
    <span class="card-title">Add Item</span>
  </div>
  <form (ngSubmit)="onSubmit()" class="col s6">
    <div class="row">
      <div class="input-field col s6">
        <input type="text" placeholder="Add Title" [(ngModel)]="item.title" name="title">
        <label>Title</label>
      </div>
      <div class="input-field col s6">
        <input type="text" placeholder="Add Description" [(ngModel)]="item.description" name="description">
        <label>Description</label>
      </div>
      <input type="submit" value="Submit" class="btn">
    </div>
  </form>
  </div>
</div>

I am using Angular and firebase to great a simple page, though I am not sure why this is happening. Specifically the button and the inline text. I am fairly new to this.

Answer 1

So i assume you use https://materializecss.com ( from the looks and the class names ), i think you are missing the card-content and card class from your markup.

<div class="card">

    <div class="card-content">

      <span class="card-title">Add Item</span>

      <form (ngSubmit)="onSubmit()" class="col s6">
        <div class="row">
          <div class="input-field col s6">
        <input type="text" placeholder="Add Title" [(ngModel)]="item.title" name="title">
        <label>Title</label>
          </div>
          <div class="input-field col s6">
        <input type="text" placeholder="Add Description" [(ngModel)]="item.description" name="description">
        <label>Description</label>
          </div>
          <input type="submit" value="Submit" class="btn">
        </div>
      </form>

    </div>

</div>

ref: https://materializecss.com/cards.html