<nav>不遵守寬度：可能的解決方案？

Question

我有<nav>一個相當奇怪的現象：

我的HTML很簡單：

<div class="rounded screen defaultBg"> 
    <header> 
     <img src="/img/logo-temp.png" alt="logo" width="185" height="88"/> 
    </header> 

    <nav> 
     Nav<br/> 
     Nav<br/> <!--Placeholder--> 
     Nav<br/> 
     Nav<br/> 
     Nav<br/> 
     Nav<br/> 
     Nav<br/> 
     Nav<br/> 
     Nav<br/> 
     Nav 
    </nav> 

    <div id="content"> 
     ... 
    </div> 
    <footer>...</footer> 
</div> 

和有關CSS是

nav { 
    display:table-cell; 
    width:200px; 
} 

#content { 
    display:table-cell; 
    width:80%; 
} 

.rounded { 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 

.screen { 
    padding:3px; 
    display:table; 
    width:1000px; 
    margin:auto; 
} 
.screen header, .screen footer { 
    display:table-row; 
    text-align:center; 
} 

我發現唯一的解決方法是指定.screen寬度%，但是，我的佈局將特定於幾個屏幕尺寸，因此我需要一個確切的像素值。任何人都可以提供一些關於如何解決這個問題的見解嗎？

Answer 1

研究發現，由於某些原因，只有這樣才能解決，這是通過將頁眉和頁腳div class="screen"容器外。現在看起來如此。