标头，h1和导航使导航无法移动

Question

I want to make navigation at the same level as h1 text and make it not movable and resizable. For now navigation is acting like random RWD, going below my h1 text, then changing display from left->right to top->bottom. I was trying to set ul position to static/absolute/fixed, nothing seems to work as I'd like.

JsFiddle example: https://jsfiddle.net/26tx3t3p/1/ .

HTML:

<header>        
    <h1 class="logo">   myexamplesite</h1>
    <nav class="primary">
        <ul>
            <li><a href="#">info1</a>/</li>
            <li><a href="#">info2</a>/</li>
            <li><a href="#">info3</a></li>
        </ul>
    </nav>

</header>

CSS:

.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}

a{
text-decoration:none;
}

.primary ul{
float:right;
display:inline-block;
}

.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}

How to make navigation to be set at beggining position, after resizing window ?? Is there a way to do it, without putting stiff margin/width values ??

Answer 1

Do you mean something like that https://jsfiddle.net/26tx3t3p/3/

i added these css

header {
  position:relative;
}
nav {
  position:absolute;
  right:0;
}