Because the elements within #below-mast are all floats. Floats are removed from the normal document flow, essentially giving #below-mast a height of 0. So the paragraph begins just below the mast, but the p's inline content is pushed by the floats down below #below-mast.
And easy fix to contain the floats, is to add overflow: hidden; to #below-mast
Why is it that when I add a paragraph to my content section my spacing is added below the my mast picture is.
http://codepen.io/Austin-Davis/pen/HImBe https://gist.github.com/4382498
Because the elements within #below-mast are all floats. Floats are removed from the normal document flow, essentially giving #below-mast a height of 0. So the paragraph begins just below the mast, but the p's inline content is pushed by the floats down below #below-mast.
And easy fix to contain the floats, is to add overflow: hidden; to #below-mast
Thanks alot... there seems to be a ton of underlying aspects of front end design that just seem to go over my head....