How to align a Wordpress navigation bar to the right of a logo?

I'm trying to get my navigation bar to the right of the logo in my Wordpress theme. It's being built with Underscores. I've managed to line up the primary navigation and the logo the way I want it, basically, with this 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;
}

and here's a picture of how I want it to look:

I understand that negative margins (assuming top: -4em; is considered with negative margins) aren't elegant or the best way to handle these sorts of things. Plus, I generally find these kinds of workarounds usually come back to bite me later on.

I'm new to playing around with JSFiddle, so I hope I've done this correctly! Here's my code, now condensed!: http://jsfiddle.net/DMDesigns/d39ej96r/11/

What's the best way to make this happen? I've been searching, seen a lot of people ask this question, but many of the answers have been too specific to their website to help me.