how to remove space or gap between navbar and header - html

Question

How can I remove the space or gap between my navbar and header?
/* Pure CSS3 Multi Level Drop Down Navigation Menu */
/* By www.Bloggermint.com */
#nav {
float: left;
font: 13px calibri, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: visible;
line-height: 10px;
/* change the border height of the menu*/
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
}
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 8px 21.5px;
/* change the width of whole menu*/
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0, 0, 0, 0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav ul li a:hover,
#nav ul li:hover>a {
color: #FFF;
/* change tabs font hover color */
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover>a {
color: #FFF;
/* change the drop down font color*/
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li ul {
overflow: visible;
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
border-radius: 0 0 30px 30px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 31px 0 0;
/* change the position of drop down menu, up and down.*/
position: absolute;
width: 200px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
left: auto;
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 156px;
/* change the border drop down menu border size*/
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#nav li li ul {
margin: -1px 0 0 200px;
/*change the parent drop down list position, Right, Left*/
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility: hidden;
}
#nav li li:hover>ul {
visibility: visible;
}
#nav li:hover>ul {
left: auto;
}
#nav ul ul li:last-child>a {
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#nav ul ul ul li:first-child>a {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Books
<ul>
<li>Islamic Books</li>
<li>Poetry Books</li>
<li>Knowledge Books</li>
<li>Computer Books</li>
<li>Programming Books</li>
</ul>
</li>
<li>Our Portfolio</li>
<li>One Dropdown
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Level 2.3</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Three Levels
<ul>
<li>Level 2.1</li>
<li>Level 2.2</li>
<li>Pir Nasir Ud Din Shah <font size="1"> ► </font>
<ul>
<li>Level 2.3.1</li>
<li>Level 2.3.2</li>
<li>Level 2.3.3 <font size="1"> ► </font>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<li>Level 2.3.4</li>
<li>Level 2.3.5</li>
<li>Level 2.3.6</li>
<li>Level 2.3.7</li>
</ul>
</li>
<li>Level 2.4</li>
<li>Level 2.5</li>
</ul>
</li>
<li>Services</li>
<li>Contact Us</li>
<li>About Me</li>
<li>AlhamduLillah</li>
</ul>
</div>

Answer 1

Okay, I'm just going to put this here instead of in the comments as I'm guessing Faisal has fixed the issue this way.
Setting a margin-top: style to a negative number, say -10px, will move the selected element up by that amount. So adding:
margin-top: -10px;
to your #nav CSS should fix the issue - it's just a case of setting the right value.
However, without seeing all your HTML markup for the header and nav, I can't guarantee that this will work for your case.
Care to share your solution?