使我的標題和包裝流體/響應與％似乎沒有工作

Question

所以我想讓我的網站流暢。所以我開始使用我的包裝和標題。的CSS：

#wrapper { 

    max-width:1600px; 
    width:100%; 
    margin:0 auto; 

} 

#header { 

     margin: 0 auto; 
     width: 100%; 
     height: 7.5%; 
     background-color: #0066FF; 
     display: table-cell; 
     vertical-align: middle; 

    } 

的HTML：

<div id="wrapper"> 
     <div id="header"> 
      <div id="logo_wrapper"> 
       <span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span> 
      </div> 
       <form action="login.php" method="post"> 
        <div id="aanmeldform_submit"> 
         <input type="submit" name = "submit_login" value="Aanmelden" id="submit_knop" /> 
        </div> 

        <div id="aanmeldform_wachtwoord"> 
         <input type="password" name ="password" value="" id="aanmeld_knop" required placeholder="Voer je wachtwoord in" /> 
        </div> 

        <div id="aanmeldform_email"> 
         <input type="email" name="email" value="" id="aanmeld_knop" required placeholder="Voer je e-mail in" autofocus/> 
        </div> 
       </form> 
     </div> 

頭應跨越屏幕的整個寬度，就像包裝。但由於某種原因，當我將標題的寬度也設置爲100％時，標題僅僅是屏幕的1/3。當我將標題的寬度更改爲1 - 10％左右時，出於某種原因它會跨越整個寬度。任何人都知道是什麼導還包括更好地瞭解一個小提琴：http://jsfiddle.net/4J7JJ/

當你在小提琴1％設置頭，你可以看到它跨越由於某種原因，整個寬度..

提前感謝！

Answer 1

嘗試改變顯示

#header { 

     margin: 0 auto; 
     width: 100%; 
     height: 7.5%; 
     background-color: #0066FF; 
     display: inline-table; /* that fix the problem */ 
     vertical-align: middle; 

    }