Help with placing elements side by side

OK, I know that this is very basic but for some reason it’s just not working. In my header I have my site title and site menu.
So the header container is <header class=”header” role=”banner”>. The title is in an element <h1> and the menu in an element <nav class=”nav” role=”navigation”>. I want title on the left and menu on the right, and title and menu to float side by side, but right now the menu is always below the title no matter what I do.

The css in my child template is:

Title:

.container .header h1, .header h5 {
    margin: 10px 0 0 5%;
    text-align: left;
    float: left;
    position: relative;
    width: 20%;
}

Menu:

.container .header .nav {
    float: right;
    position: relative;
    text-align: right;
    margin-right: 1%;
    width: 65%
}

Clearly I’m doing something wrong. I have the left / right locations the way I want them, and the widths are fine. But the title is above the menu, instead of being at the same level. I apologize for not providing a link but I’m working off of my NAS for now. Could someone please be kind enough to tell me what I’m doing wrong? I’m sure it’s trivial but… it’s Friday. 😀