Avenue 7.0 template - make last header link a button?

I'm using the Avenue template on 7.0, I need to keep this template for its grid index styling, but I want to add a call to action button to the header. I've tried some code snippets I found in this forum and nothing has worked.

URL: https://www.stephanievecellio.com

Ideally would like the outlined pill style and solid on hover. 

Thanks for any help!!

I got this code to work: 

.main-nav li:last-child a {
   background-color: transparent;
  border-width: 2px; 
  border-radius: 300px;
  border-style: solid; 
  padding: 13px 26px !important;

}

But it moves the button out of center and I can't figure out how to get it in line with the rest of the header.

It had something to do with the padding, so adjusting the top margin worked. It messed with the mobile menu so added more bottom margin too.

.main-nav>ul>li:last-child a {
   background-color: transparent;
   border-style: solid; 
  border-width: 2px; 
  border-radius: 300px;
  padding: 13px 26px !important;
  margin-top: 22px; 
  margin-bottom: 22px; 

}

Can anyone help me access the mobile nav though? This is what it does to mobile, which is fine but not ideal.

You want to disable button on mobile or?

Yeah ideally I would like to disable the button on mobile.

Change this class name

.main-nav>ul>li:last-child a

to this

.main-nav:not(.mobileNav)>ul>li:last-child a