如何将徽标右侧的Wordpress导航栏对齐？

我正在尝试使我的导航栏位于Wordpress主题中徽标的右侧。它是使用Underscores构建的。基本上，我已经使用此CSS按照我想要的方式将主要导航和徽标对齐：

.main-navigation {
    position: relative;
    float: right;
    top: -4em;
    width: 55%;
    display: block;
    clear: both;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    float: right;
}

这是我想要它的外观的图片：

我知道，负边距（假设top: -4em;被认为是负边距）并不是一种优雅的方法，也不是处理这类事情的最佳方法。另外，我通常会发现这些变通办法通常会在以后引起我的注意。

我是JSFiddle的新手，所以我希望我已经正确地做到了！这是我的代码，现在已压缩！：http : //jsfiddle.net/DMDesigns/d39ej96r/11/

做到这一点的最佳方法是什么？我一直在搜索，看到很多人问这个问题，但是很多答案都太过具体，无法帮助我。