MARGIN Issue ! margin conter-intuitive functionsing .

how if i have the following code :

HTML :

<section class="home">
 
 
</section>
<section class="main">
	<h1>Hello</h1>
 
</section>

CSS :

html,body{
	height: 100%;
	width: 100%;
}
.home{
	background: #000;
	height: 100%;
}
.main{
	height: 100%;
	background: pink;
}

Why the white space or rather margin between the 2 sections ?? the problem seems to be the h1 tag . if i do :

h1{
	margin: 0;
}

Bham ! problem solved .

I have two issues with this .

1st the minor problem , now this style might be applied by the browser , i ca correct this with a reset no issues . but this is still a problem nevertheless .

my 2nd problem , AND THE big problem , now suppose the browser or even i explicitly specify that the margin-top of the h1 should be say 20-30px the margin should be from side the .main section WHY IS THE MARGIN APPLIED TO h1 WHICH IS INSIDE .main ACTING AS A MARGIN BETWEEN .main and .home ?

What is the cause of this unique problem ??