Wierd Space Between Divs - HTML/CSS - html

Question

Why does my code creates this wied spaces between divs.
HTML:
<div id="container">
<div id="header">
<p class="header_title">Theme Preview</p>
<p class="header_quote">Previewing Another Blog</p>
</div>
<div id="menu">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="post">
<p class="post_title"></p>
<hr />
<p> <span class="post_date"></span> <span class="post_autor"></span> </p>
<div class="post_content">
</div>
<hr class="post_final" />
</div>
<div id="footer">
<p>Design by</p>
</div>
</div>
CSS:
body {
width:100%;
background-color:#C1C8D0;
height:auto;
}
#container {
margin:auto;
max-width:1600px;
width:100%;
height:auto;
}
#header {
background-color:#1B1C1E;
width:100%;
height:auto;
text-align:center;
}
.header_title {
padding-top:5%;
color:white;
font-family:Agency FB;
font-size:5em;
text-align:center;
}
.header_quote {
color:#EBEBEB;
font-family:Agency FB;
font-size:1em;
text-align:center;
padding-bottom:5%;
}
#menu {
background-color:white;
}
I already looked the CSS and I did not wrote any margin or something related to crate blank spaces.

Answer 1

I think it the p tag
p{margin: 0;}

Answer 2

It seems like you are not resetting the CSS, so each browser may render the CSS differently. To avoid that, I recommend to use a CSS reset file which need to be included before all CSS files. This file resets all the styles which may be applied by different browsers to a consistent baseline.
As a "hot-fix" you can still do this, but as mentioned it's more common to use a CSS reset.
Add margin: 0; to .header_quote and add following CSS rule
#menu > ul{
margin: 0;
}
Fiddle