How to align Nav Bar right next to div? - html

Question

This is my website
Does anyone know how to put the nav bar right next to the white box where my content will go? I just want it exactly vertically aligned with the white box, but make it sit just to the left of it. Thanks
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><span class="text">HOME</span></li>
<li><span class="text">HTML & CSS</span></li>
<li><span class="text">USABILITY</span></li>
<li><span class="text">ACCESSIBILITY</span></li>
<li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
</a>
</li>
</ul>
</div>
</nav>
CSS
nav {
margin: auto;
}

Answer 1

EDIT: I misunderstood the question, here is the new answer:
http://codepen.io/Vall3y/pen/gbpRoG
I have put the nav and content again under the same container, but the container is now relatively positioned, and the nav is absolutely positioned at top: 0, left: 0. You can control the distance of the nav from the content by adjusting the container width, or with the left attribute of the nav. I have applied a dashed border around the container to demonstrate what is happening, but in your site it doesn't need a border of course.
Orig:
If you could include the rest of the code I could give you a better example, but here is the layout you want:
http://codepen.io/anon/pen/EajXgq
The key here is that the nav and content are adjacent in markup (elements comes right after another. I used float left to make them on the same vertical line but there are other techniques)
The nav is floated left, so that it doesnt take any flow space and allows the content to horizontally align at the center, using a fixed width and an auto margin.
They both are contained in a container to allow margin from the logo if necessary
Also see that there is a clearfix element, for clearfix. Google it to find out what it does but basically it allows the container to stretch over the floated elements so it doesn't mess up the layout
<div class="purple-logo"></div>
<div class="container">
<div class="nav"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>