网页导航无法正确显示

Question

我的网页导航栏出现问题，我想知道我应该接近这个问题的正确方法。目前，右侧的导航显示在下面的行中。我试图通过使用float来正确地工作：对，但我知道浮动会导致一堆问题。

    <div class="subHeading">
        <ul>
            <li><a href="">Your account</a></li>
            <li><a href="">Our services</a></li>
            <li><a href="">Your water</a></li>
            <li><a href="">Get help</a></li>
            <li><a href=""><img src="css/images/icon_search_border.png"></a></li>
        </ul>
    </div>

http://codepen.io/s_bruno1/pen/GrYpKb

提前致谢。