Bulma .field-div aligns left on mobile

Question

I am doing my first project with bulma. I built an input tag and two buttons and grouped them in a .field-div as shown in the documentation. It works perfectly on big screens but on mobile/tablet everything aligns left. Here's a snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

<div class="columns is-marginless has-text-centered">
  <div class="column">
    <!-- some more unimportant stuff here -->
    This text for guessing the center

    <div class="columns is-centered m-3">
      <div class="column is-narrow">
        <div class="m-3">
          <div class="field has-addons">
            <div class="control">
              <input class="input" />
            </div>
            <div class="control ">
              <button class="button is-danger">
 +
                </button>
            </div>
            <div class="control ">
              <button class="button is-danger">
                  -
                </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Any hint or workaround? I'd appreciate it. Thanks

Answer 1

This did the trick:

<div class="columns is-centered is-mobile m-3">
 <div class="column is-narrow">
  [...]