Bulma centered select issue

by Stefano

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<form class="m-5" style="border: 1px solid lightgrey">
  <!-- FROM THE DOCS -->
  <div class="field has-text-centered">
    <label class="label">
      <code>.field.has-text-centered > .control > .icon</code>
    </label>
    <div class="control has-icons-left">
      <div class="select is-small">
        <select>
          <option selected>Country</option>
          <option>Select dropdown</option>
          <option>With options</option>
        </select>
      </div>
      <span class="icon is-small is-left">
        <i class="fas fa-globe"></i>
      </span>
    </div>
  </div>

<br>

  <!-- FIXED -->
  <div class="field has-text-centered">
    <label class="label">
      <code>.field.has-text-centered > .control > .select > .icon</code>
    </label>
    <div class="control has-icons-left">
      <div class="select is-small">
        <select>
          <option selected>Country</option>
          <option>Select dropdown</option>
          <option>With options</option>
        </select>
        <span class="icon is-small is-left">
          <i class="fas fa-globe"></i>
        </span>

      </div>
    </div>
  </div>
</form>