与Bulma CSS重叠的部分

Question

我正在尝试学习Bulma，我想用此布局显示一个简单的页面：

<header>
<hero>
<section>
<footer>

我不明白为什么他们彼此重叠，而不是一个明显的彼此重叠。

有一个虚拟容器，显然被标题放错了位置和隐藏。重叠也很明显。

https://codepen.io/anon/pen/blgowb

<nav class="navbar is-primary is-fixed-top has-text-white">
    <div class="container">
        <div class="navbar-brand">
            <img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
        </div>
        <div class="navbar-menu">
            <div class="navbar-start">
                <div id="navItem" class="navbar-item">Primo</div>
            </div>
        </div>
    </div>
</nav>
<section class="section">
    <div class="container dummy">
    </div>
</section>
<div class="hero ">
    <div class="container has-text-centered is-size-1">
        <h1 class="title"> Explore and use libraries and software</h1>
    </div>
</div>
<div id="search" class="container">
    <div class="columns searchBlock ">
        <div class="column is-paddingless">
            <form>
                <input class="input searchInput" type="text" placeholder="Search">
            </form>
        </div>
        <div class='column is-3 is-paddingless'>
        </div>
        <div class='column is-2 is-paddingless'>
            <a class='button is-primary  searchButton'>Search</a>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container is-text-centered">
        <p> Footer </p>
    </div>
</footer>
<script src="old.js"></script>

Answer 1

.hero-body缺少

<div class="hero">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title"> Explore and use libraries and software </h1>
    </div>
  </div>
</div>

布尔玛 - 英雄

Answer 2

我认为列的问题。更改列边距遵循此

.columns {
     marign:0;
}