Section Content appears above nav bar as i scroll

Sure ;). A browser is 3 dimmensional. It has height, width and depth. he first two - height and width - represent the place on the website. The z-index value tells the depth of the website. Normally all objects are on the same level (by default) and the overlap over the parent object. There might be some things that you want to be on top of all of the rest. The z-index is the one you should change. The higher the value, object will appear on top of another with lower value.

Depth of the Website might be better represented thanks to the Firefox 3D View. Take a look at those websites :)

webflow.com:

overtongraphics.com: