Bulma: .nav-item impossible to text-align center

[leofontes]

Hey all,

Great job on the framework. I am using the navigation menu and it works great, however on mobile, I need to be able to center the nav-itens but no matter what I try, I can't do it.

Here is my HTML (Im using Rails):

  <div class="nav-right nav-menu">
      <%= link_to('Home', url_for('/'), class: params[:controller] == 'index' ? 'nav-item is-tab is-active' : 'nav-item is-tab') %>
      <%= link_to('Quem Somos', url_for('quem-somos'), class: params[:controller] == 'quemsomos' ? 'nav-item is-tab is-active' : 'nav-item is-tab') %>
      <%= link_to('Portfólio', url_for('portfolio'), class: params[:controller] == 'portfolio' ? 'nav-item is-tab is-active' : 'nav-item is-tab') %>
      <%= link_to('Contato', url_for('contato'), class: params[:controller] == 'contato' ? 'nav-item is-tab is-active' : 'nav-item is-tab') %>
  </div>

And here is the CSS I'm trying to apply to the .nav-right .nav-item

  .nav-right .nav-item
        color: green
        text-align: center
        width: 100%

Both the width and the color properties apply, but the text-align, even thought its shown as computed on the inspector, is nowhere to be seen.
Here is a screenshot of how the nav menu is looking like:

And here is a screenshot of my inspector:

Any suggestions on what I can try to fix this? (!important didnt)

Thank you so much, and great job on the framework.

[JorgenSolli]

This should do it :)

.nav-right .nav-item {
    width: 100%;
    display: inline-block;
    text-align: center
}

[leofontes]

You own, thank you so much. Didn't know display could influence on that