Making my header & wrapper fluid/responsive with % doesnt seem to work - html

Question

So i wanted to make my website fluid. So i started with my wrapper and header. The 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;
}
The 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>
The header should span the entire width of the screen, just like the wrapper. But for some reason, when i set the width of the header also to 100% the header only is like 1/3 of the screen. When i change the width of my header to around 1 - 10 % it DOES span the whole width for some reason. Anyone know what is causing this? Also included a fiddle for better understanding: http://jsfiddle.net/4J7JJ/
When you set the header in the fiddle to 1% you can see it does span the entire width for some reason..
Thanks in advance!

Answer 1

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