has-text-centered of Bulma does not work well

Question

I tried centering my content using has-text-centered of Bulma. But "Hello" is a little bit off to the left. Why?

My Code:

<div class="columns is-multiline">
<div class="column is-2"><p class="notification is-primary has-text-centered">Hello</p></div>
</div>

My Output:

Answer 1

In notification class there is "padding:1.25rem 2.5rem 1.25rem 1.5rem" you need to change it to this "padding: 1.25rem 1.5rem 1.25rem 1.5rem".

Answer 2

Check this post. has-text-centered is a class so you need to give the property to that particular class means text-align: centre; for centre align if you want the text on left so use text-align: left; for left align in has-text-left class.

.is-multiline {
  background-color: #00d1b2;
  padding: 15px;
  width: 100px;
  color: #ffffff;
}
.has-text-centered {
  text-align: center;
} 

.has-text-left {
  text-align: left;
}

.has-text-right {
  text-align: right;
}

<div class="columns is-multiline">
<div class="column is-2"><p class="notification is-primary has-text-centered">Hello</p></div>
</div>