Oddness when I align primary nav

Hi there,

try this CSS:

@media (min-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .site-logo {
        margin-right: auto;
    }
}

OK neat thanks David. Its centered now but is there also a way to get rid of the lines around the primary navigation?

See image

http://www.screencast.com/t/NRjPB2z0XcI

Remove this CSS from Additional CSS in the customizer:

/* navigation top and bottom rules */
#site-navigation {
	border-top:  solid 1px rgba(136,136,136,0.5);
	border-bottom: solid 1px rgba(136,136,136,0.5);
}

Right on thanks!
But now I realize I need the equivalent rule on top of my hero image :( since the rule isnt coming from the navigation anymore (and I'm moving the navigation)

Sorry this was more complicated than I planned. T_T

Can you link me to the page in question?

Sure its this page (im testing out an updated home page here)

https://fiveyearfireescape.com/sections-trial/

the primary nav is under the header here because I dont know how to change it for just this trial page.
but there are rules above and below it which i will remove when I float the primary nav to the right of the site logo. So I want to put a rule on the top of the hero image once I move the nav.

You should be able to do this:

.page-hero {
    border-top: solid 1px rgba(136,136,136,0.5);
}

Oh nice it works but I realized there is a problem
Not all of my pages have the hero image but when I move my primary navigation I will lose the rule it gives at the bottom of my header.

How would I put the same rule at the bottom of the header? I assume its like this but I cant figure out how to address the header :(

.header {
    border-bottom: solid 1px rgba(136,136,136,0.5);
}

Hi there,

you already have borders on the top and bottom of the primary nav? So i am unsure as to what is missing when you visit a page without a Header Element

Sorry I plan to move the primary nav to float right of the logo, thus causing me to lose my borders, but I don't want to move it until I can figure out how to put the rules in.

Aah ok. You would need to use the .site-header selector in your CSS