延伸寬度主導航，但仍保持其中心對齊

Question

我的網站是www.rosstheexplorer.com

我想要的導航菜單是相同長度的頭。標題始終覆蓋頁面的整個寬度。

我對寬度，最大寬度和浮點數進行了實驗，但是我無法達到理想的效果。

下面是我試過的一個實驗。

@media screen and (min-width: 50em) 
.main-navigation { 
    font-size: .8125em; 
    line-height: 2.09231em; 
    text-align: center; 

width: 100% 
     float:left 

} 

我已經能夠得到覆蓋頁面的左側或右側，但頁面不兩側的菜單。

另外，當我改變菜單的寬度時，我一直無法保持文本在圖像下居中。

有沒有人有任何想法？

Answer 1

你只需要拉頭元素出從頁面DIV：

<div class="header">[...]</div> 
<div id="page" class="hfeed site"> 
    // This needs to go up 
    <header id="masthead" class="site-header" role="banner">[...]</header> 
    [...] 
</div> 

就像是：

<div class="header">[...]</div> 
<header id="masthead" class="site-header" role="banner">[...]</header> 
<div id="page" class="hfeed site"> 
    [...] 
</div>