Centered layout

Before implementing the login box, be sure to first set up the layout. You want the box to be both horizontally and vertically centered:

• container: Makes sure that the box will have a maximum width, and won’t reach the edges of the page on wider viewports.
• columns: Is a wrapper for the single column.
• column: Will be horizontally centered.
• box: With its white background and shadow allows its content to be readable on this turquoise webpage.

<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-centered">
        <div class="column">
          <form class="box">
            Login
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Even though you are using is-centered, the content doesn’t look centered. It’s because...