html - Can't Centre Header Contents - Navigation and Logo into one line -

i'm having problem have logo , navigation links in <header> , when use css text-align:center; logo goes on 1 line in centre , navigation links go onto line directly beneath it.

ideally them on 1 line next each other.

in jsfiddle below have added float:left; onto .logo class have them on same line temporary fix.

my jsfiddle: https://jsfiddle.net/z4f21hx3/1/

any appreciated.

thanks,

mistunleashed

this fix until 605px , under.

css:

/* beauty queen 7 css */  /* css reset */  * {     margin:0;     padding:0; } /* css main */  html {     background-color:#fff; } header {     background-color:#fff;     width:100%; } nav {     text-align:center;     margin:0 auto;     display:block;     box-shadow:0 4px 2px -2px gray; } .logo {     display:inline-block;     //float:left;     height:120px;     vertical-align:bottom; } .logo img {     height:120px;     width: auto; }  nav ul {     list-style:none outside none;     margin:0;     padding:0;     display:inline-block; } nav ul li {     display:inline-block;     list-style:none outside none;     -moz-transition:all 300ms ease-in-out 0s;     -ms-transition:all 300ms ease-in-out 0s;     -o-transition:all 300ms ease-in-out 0s;     -webkit-transition: 300ms ease-in-out 0s;     transition:all 300ms ease-in-out 0s; } nav ul li {     color:#555;     display:block;     line-height:5em;     padding:3em 1em 0em 1em;     text-align:left;     font-family:tahoma, geneva, sans-serif;     font-size:15px;     text-decoration:none;     -moz-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -ms-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -o-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     -webkit-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;     transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s; } nav ul li:hover {     background-color: #f36;     color: #ffffff; } 

demo: jsfiddle