Space between backgrounds

Space between backgrounds
0

#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.

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:


#3

Glad you got it figured out. If you wanted there to be more vertical space in the title of the header section, you could add the following to the h1 selector:

margin:0;
line-height: 137px;

or add some top and bottom padding with:

  margin:0;
  padding: 50px 0;

#4

Thanks, yep that’s helpful to add in.