Centering nav bar in header with logo - html

Question

Looking for a little help with a project, I am trying to get a nav bar centered inside a header with a logo on the left.
HTML
<header>
<img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
<div id="nav">
<span>Home</span>
<span><button>Televeisions</button></span>
<span>Electronics</span>
<span>Services</span>
</div>
</header>
CSS
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
}
#nav {
width: 100%;
text-align: center;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
JSFiddle

Answer 1

Your nav width 100% is forcing the nav below the image. I added overflow: hidden to the header, floated the img left, and put a margin-top on the #nav.
Adjust your CSS to something like this:
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
overflow: hidden;
}
img {
float: left;
}
#nav {
width: 600px;
text-align: center;
margin-top: 2.5em;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}
You can adjust the margin, etc. to style how you want from there on out.
Codepen: http://codepen.io/Tambe257/pen/XdGdLZ

Answer 2

Use positioning on your parent element and your child elements that will be nested inside. Here's a quick example
header {
height: 5.5em;
background: gray;
color: Black;
text-align: justify;
position:relative;
}
#nav {
width: 100%;
text-align: center;
top:2em;
position:absolute;
}
#nav span a {
color: black;
text-decoration: none;
padding: 10px;
}