I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge of the wrapper? Any advice would be greatly appreciated! Below is a simplified version of the code I'm using, including inline CSS.
HTML
<div id="wrapper">
<div id="header">
<h1>Test Page</h1>
</div>
<!--header-->
<div id="nav"> <a href="index.html">Home</a> <a href="index.html">Link 1</a> <a href="index.html">Link 2</a> <a href="index.html">Link 3</a> <a href="index.html">Link 4</a>
</div>
<!--nav-->
<div id="main">
<p>This is the test page.</p>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!--main-->
</div>
<!--wrapper-->
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
h1 {
line-height: 200%;
margin-bottom: 0px;
}
a {
padding-left: 10px;
padding-right: 10px;
color: #000000;
}
#wrapper {
background-color: #FFFFFF;
min-width: 760px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #40ebff;
color: #FFFFFF;
padding-left: 5px;
}
#nav {
font-weight: bold;
background-color: #ffdab2;
padding: 5px;
}
#main {
padding-left: 20px;
padding-right: 20px;
}
FIDDLE > http://jsfiddle.net/znfa0Lkf/