Simplistic header for a minimal website - trouble with position

Question

I'm Jason and am trying to get into the basics of some HTML/CSS (with bootstrap)/JS to springboard some front-end knowledge

I have gone through some tutorials: some good, some bad - and am trying to go through a site on my own since I think that will help me learn the quickest. Right now, I have a logo that I am trying to fix to the top/middle-left of the screen, and a basic inline menu to the right of that logo on the same line to the right. For some reason though, the menu won't cooperate by staying on line with the logo. The menu also stacks rather than runs horizontal. Do I need to include t he logo in the same container, or is there a better way to do so to manipulate down the road?

<div class="nav">
        <div class="logo">
    <img src="logo.gif">
    </div>

  <div class="container">
    <ul class = "pull-right">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Resume</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

CSS:

.nav li{
display: inline;
}
.logo{
    position: fixed;
    top: 10px;
left: 50px;
}
.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;

}

I'm sure pull-right isn't needed, but I left it in there to see where I am on the incorrect track. Many thanks.

Answer 1

Try this:

.nav {
    position: fixed;
    top: 10px;
}
.nav li{
    display: inline-block;
}
.logo{
    position: relative;
    left: 50px;
}
.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;

}

That way, the entire nav will be fixed and not just the logo, remember that fixed positioned elements get abstracted from theyr respective containers and get related to the viewport instead.