Navigation Menu Links Moving When Clicked

Hello,

I’ve been working on customizing my website by using a child theme, and something has gone wonky, but I’m not sure what I did wrong. I was changing the colours of the links site-wide, and now when I click on the navigation menu or site title, they move to the right and a weird underline appears. I tried to make the CSS for those elements as specific as possible, but it didn’t work.

I recorded it happening (link below), and tested it in both Safari and Chrome.

https://imgur.com/a/ubpcK

Here is the CSS I added just before I began having the issues:

/* Link colours
---------------------------------*/

a:-webkit-any-link {
    text-decoration: inherit;
}

.widget a {
    text-decoration: none;
    color: #5e5853;
}

.widget a:visited {
    color: #5e5853;
}

.widget a:hover, a:focus, a:active {
  color: #8A59A6;
  text-decoration: underline;
}

a {
    color: #8A59A6;
    transition: 0.3s;
}

a:visited {
    color: #8A59A6;
}

a:hover, a:focus, a:active {
    color: #99908a;
    text-decoration: underline;
}

.site-footer a,
.site-footer a:visited {
    text-decoration: none;
    color: #99908a;
}

.site-footer a:hover,
.site-footer a:visited:hover {
    color: #99908a;
    text-decoration: underline;
}

.entry-meta a {
    color: #383e44;
    text-decoration: none;
    cursor: default;
}

.site-title a:link, .site-title a:visited, .site-title a:hover, .site-title a:focus, .site-title a:active {
    color: #e8e9ea;
    text-decoration: none;
}

/* Menu Nav bar
---------------------------------*/

.main-navigation a:link, .main-navigation a:visited, .main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active {
    text-decoration: none;

}

/* Related posts bar
---------------------------------*/

#jp-relatedposts h3.jp-relatedposts-headline {
    font-family: Raleway, "Helvetica Neue", sans-serif !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
    font-family: Raleway, "Helvetica Neue", sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

I’m really hoping that I can find a way to keep the CSS formatting I did and fix the issue since I’m really happy with the way my links turned out!

Thanks in advance!

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