Sticky Nav Allignments

Trying to accomplish this nav menu layout:
https://www.squarespace.com

Im on GP 1.7.8

I currently have 2 Elements set up.
1. Header to accomplish the transparent nav bar
2. Hook – To have my logo change after scroll

I am stuck at aligning my 2 right menu items to “float right” it currently pushes “Contact” up when float is set to “right”

Here is my css:

/*Main Navigation Padding */
.main-navigation
{
padding-top:20px;
padding-bottom:20px;
padding-left:40px;
padding-right:40px;
}

/*Navigation Logo Placements */
.main-navigation .navigation-logo img {

position:absolute;
left: 0px;
}

.home .navigation-logo.sticky-only {
display: none;
}

.home .navigation-stick .navigation-logo.sticky-only {
display:block;

}

.home .navigation-stick .navigation-logo:not(.sticky-only) {
display: none;
}

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-contact a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
float:right;
}
}

The page I need help with: [log in to see the link]