Space between backgrounds

1

Hi all,
I’m trying to figure out why there is a white space between my header background and my nav/section backgrounds. I would assume that if I have a header background color then it would fill the space right up where the nav/section areas are. Could anyone help tell me what I’m doing wrong. I’m sure my coding isn’t generally right anyway (only been going at it a few weeks), but that aside is there any obvious mistake I’m making.

Here is a pic of what it looks like currently, with the code below.

37
371271×742 50.9 KB

HTML

<body class="container">
	<header class="grid horizonbkgr">
		<h1>Vertical Navigation</h1>
    <nav class="col-1-5">
			<a href="">Home</a>
			<a href="">Photos</a>
			<a href="">Recipes</a>
			<a href="">Contact</a>
		</nav>
	</header>
    <section class="col-4-5">
      <h2>Playing with Vertical Navigation Bars</h2>
      
      <p>This is a separate section that will hold the content for each page.  The next paragraph is just filler text. It doesn't mean anything.</p>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
    </section>

CSS

/*

==================================
Grid
==================================

*/

.container{
	margin: 0 auto;
	width: 960px;
}

.grid {
	width: 960px;
}
.container {
  padding-right: 30px;
  padding-left: 30px;
}

.col-1-5{
	width:200px;
}

.col-4-5 {
	width:760px;
}

/*

==================================
Typography
==================================

*/

h2, h3, p, a {
	margin-bottom: 22px;
}

h1 {
	font: small-caps bold 32px arial; 
	text-align: center;
}


/*

==================================
Background
==================================

*/

header {
	background: #DEFFFD;
}

h1 {
	background: #DEFFFD;
}

nav {
	
	float:left;
	background: #DEFFFD;	
	height: 50vh;

}

nav a{
	display: block;
	font: small-caps 20px arial;
	text-align: center;
}

section {
	background: #DEFFE1;
	float:right;
	width: 75%;
	height:50vh;
}
2

I think I figured it out. If I’m right, this is a case of where there is default padding/margins etc… in place. By adding:

h1 {margin: 0;}

I was able to get rid of the space:

40
401137×605 49.1 KB

4

Thanks, yep that’s helpful to add in.