Text-decoration/CSS causing text to move

I’ve tried a bunch of techniques to solve this. I’ve used float (left/right) and played with positioning (absolute & relative). None worked.

Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied.

I’m new to CSS and this is my first header- so any feedback on the header/site-navigation as a whole is welcome. My second layer nav (ul ul) seems to be lining up vertically, and seems to be using effects from the previous layer. This needs fixing too.

Here is my code:

.main-navigation {
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    padding-top:0em;
    margin: 0px auto;
    z-index: 999;
    border-top: 2px solid;
    border-bottom: 1px solid;
    display: inline-block;
}

.main-navigation-body {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

.main-navigation-body ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation-body a {
color:black;
}

.main-navigation-body a:visited {
}

.main-navigation li {
    display: inline-block;
    text-align: center;
    padding:1.64em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    }

.main-navigation a {
    text-decoration: none;
}

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 2.0em;
    left: -999em;
    z-index: 99999;
    background-color:pink;
    width: 100px;
    text-align:left;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {

}

.main-navigation ul ul li {
display: inline-block;
    border-top: 0px solid;
    border-bottom: 0px solid;
    padding:0.1em;
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
font-weight: bold;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
font-weight: bold;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
font-weight: bold;
color: #BB9A69;
}

Here is the website

Thanks,