Q:

The content of a HTML date input field is shifting to the left when I input data in it

I don't know how to fix this problem. In my HTML form I have 2 ´input[type="date"]` fields like this:
<div class="search-wrapper">
  <div class="advanced-search">
    <form>
      <input type="text" placeholder="Dateiname">
      <input type="text" placeholder="Benutzer">
      <input type="date" placeholder="Erstelldatum">
      <input type="date" placeholder="Änderungsdatum">
      <textarea placeholder="Erste Zeile"></textarea>
      <select>
        <option disabled selected>Kategorie</option>
        <option>Rechnungen</option>
        <option>Notizen</option>
      </select>
      <select>
        <option disabled selected>Projekt</option>
      </select>
      <img id="advSearchSubmit" src="icons/search.png" />
    </form>
  </div>
</div>

And the corresponding SCSS: 
.search-wrapper {
  position: fixed;

  .advanced-search {
    display: none;
    float: right;
    width: 600px;
    padding: 40px 10px 10px 10px;
    background-color: $accent-color;
    color: $font-color-secondary;
    overflow: hidden;

    img {
      vertical-align: top;
      width: 25px;
      height: 25px;
      margin-top: 10px;
      cursor: pointer;
    }

    input[type="text"], input[type="date"], select, textarea {
      vertical-align: top;
      width: 110px;
      height: 25px;
      margin: 10px;
      padding: 2px;
      background: $data-background-color;
      color: #555;
      border: 1px solid $background-color;
      outline-color: $main-color;
      font-size: 100%;
    }

    textarea {
      height: 2em;
      width: 41.2em;
    }
  }
}

As soon as I enter a date in the input field it gets shifted to the left and is not fully visible. Here is what it looks like when I don't have anything entered in the input field and when there is something entered: 
Date Input Screenshot
How do I fix this behaviour?

A:

I managed to fix it myself. I just had to increase the width of the input[type="date"] field to at least 120px

