Website not rendering correctly in occasions

Site URL: https://wrasse-parsnip-cwzz.squarespace.com/

I am having trouble with my website as in some cases it looks ok and in other cases the buttons look stretched and the navigation on mobile is misaligned (when you click on one page it takes you to the one below it).

I am attaching screenshots of how it should look with the pill buttons, and how it renders sometimes with the elongated circles. 

Any help would be appreciated! @tuanphan

Hi. I answered your email. If it works, you can share code for other members. Thank you.

If it doesn't work, can you share password?

Hi, 

I tried 

div#page-section-5fcaddee9708706f398f9755 a {
    padding: 5px 30px !important;
    border-radius: 20px !important;
    font-size: 14px;
    line-height: 14px;
    font-family: monospace !important;
}

But it changes the way the buttons look and they overlap so that is not what I am trying to do. 

My main concern is just how it sometimes looks on mobile. The mobile version on Squarespace looks correct, but when I see it on my phone it sometimes looks off... See below:

Password: natalia

Also, if you open the site on mobile, the navigation links don't take you to the appropriate page.. it seems like the line height if each navigation link overlaps with the text of the navigation link below it. Adding a video showing how the navigation links seem to occupy more that the text's line height.

Thanks!

Ok, I think the issue is the font Franklin Gothic. Once I changed it to Helvetica Neue, the issue resolves..