Html 在基础5中未对齐的顶部条导航形式

我正在阅读这里介绍的在顶部导航栏中创建水平形状的教程

我下载了基础zip并在索引xhtml中添加了以下内容：

<nav class="top-bar">
<ul class="title-area">
    <li class="name">
        <h1><a href="#">Top Bar Title </a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
    </li>
</ul>
<section class="top-bar-section">
    <ul class="left">
        <li class="has-form">
                <div class="row collapse">
                    <div class="small-8 columns">
                        <input type="text">
                    </div>
                    <div class="small-4 columns">
                        <a href="#" class="alert button">Search</a>
                    </div>
                </div>
        </li>
    </ul>
</section></nav>

我得到的是：

在我期待的时候：

---

知道为什么输入文本和搜索按钮没有对齐吗？

请参见我对这个问题的回答：非常感谢。。。在询问之前我搜索了很多，但没有找到那条线索。