文字修飾/ CSS導致文字移動

Question

我試過一堆技巧來解決這個問題。我使用了浮動（左/右）和定位（絕對&相對）。沒有工作。

基本上，當應用文本裝飾（font-weight：bold;在這種情況下）時，我的導航保持移動狀態。

我是新來的CSS，這是我的第一個標題 - 所以任何關於標題/網站導航作爲一個整體的反饋是值得歡迎的。我的第二層導航（ul ul）似乎是垂直排隊，似乎是使用前一層的效果。這也需要修復。

這裏是我的代碼：

.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; 
} 

這裏是the website

感謝，

Answer 1

這是正常現象：粗體文字更大，從而重新定位它周圍的居中文本。

你可以去一個固定的寬度上的各個環節，以防止這種情況：

.main-navigation a { 
    text-decoration: none; 
    min-width: 6em; 
    display: inline-block; 
}