I've recently started using the impressive SASS framework, Boubon.io created by the talented team at thoughtbot. As I experiment with their supplied templates (known as Refills), I'm finding that Bourbon.io serves as a versatile alternative to popular frameworks like Bootstrap.
Setting up the templates is fairly straightforward, but I'm facing an issue with excess whitespace appearing around the navigation and footer bars after inserting these elements from the Refills template.
You can view the result here. While everything seems to be rendering correctly based on the Refills examples, the surrounding whitespace around the header and footer boxes has me stumped. I attempted to inspect the issue using firebug, but couldn't identify any obvious solution for troubleshooting.
My apologies for not providing a more minimal js-fiddle example, as it's challenging to work with these SASS frameworks in that format. The source code can be accessed through this GitHub gh-pages branch repo; since Jekyll on GH-pages compiles the SASS files dynamically for rendering the example, I included all the underlying bourbon.io, neat, and bitters SASS files in the repository as well.