Right align a button in site nav

Site URL: http://orchardroomnyc.com

Hello! 

I am trying to solve for aligning our current 'Book Now RESY button' on the site header. 

orchardroomnyc.com

Is there custom CSS that can help handle this for us? 

The goal would be to right align before the current Instagram icon, it would also be great to center it with all the other site header elements. Thank you in advance! 

As the button is in the header-nav-list, next to the other links, then it will be restricted to that container.

One way, is to position it absolutely, which takes it out of the document flow, and can be positioned anywhere. 

The code would do it, seems ok when resizing too (which can cause issues for absolutely positioned items) as the mobile menu kicks in quite quickly before it starts blocking things.

.header-nav-item.header-nav-item--external {
    position: absolute;
    right: 50px;
}

In order to get the nav links to centre vertically in the nav, then you could add align-items: center to the header-nav-list class.

.header-nav-list {
    align-items: center;
}

Absolutely positioned elements can mess up quite easily so if you can move the book now button out to the header-actions section, where the instagram button is (not sure how the page is setup, so not sure if you can) but then that would make it a bit easier to position.

Hope this helps!

Perfect, thank you so much!