Mainly the reasons are that you have defined the width of the container to be 100% instead of a fixed width. For your other elements, you are defining a percentage margin.
The Nav bar - you don't have a defined width, so it adopts it's parent width (container) which is 100%. So when you resize the browser, the nav bar resizes and if the content doesn't fit, it drops to the next line.
the columns drop because the their parent container's width is 100%, so when you resize the window, the size of the parent container changes, and if it's less than 600 pixels, the secondary column drops to the next line.
Change the container width to be a fixed width and it will fix the problems.