Header Clips Content When Centering Logo / Nav (Flatiron)

Site URL: https://www.jarodocton.com

I've added some custom-css to the flat iron template, with the intention of centering the logo and navigation. Everything looks good once the website is cached but sometimes, most often when a user first visits the site, the header clips/covers the portfolio content. Does anyone know some extra line of css that I can add to prevent this from happening? I just want to make sure a visitor can always see the full graphic when they arrive to my site. Thanks in advance!

Try adding to Home > Design > Custom CSS

nav.main-nav {
    margin-bottom: 20px;
}