html/css help gap between banner and nav

[black_pearl]

hello everyone i just have started creating a new website and i have a problem i have a gap between the banner and the nav and i have been looking all over the net and couldn't find a solution

 

here is a ss : 

http://prntscr.com/7w4t80

 

and the css :

@CHARSET "ISO-8859-1";

 

html {

width: 1216px;

margin: auto;

font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;

background-color: #fff7d8;

}

 

header{

text-align: center;

}

 

body {

font-family: "SourceSansPro Regular",sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 1em;

}

 

#menu {

text-align: center;

background-color: #5f92cd;

padding: 2px 4px 2px 4px;

color: #180457;

}

 

nav  ul, ul {

list-style-type: none;

}

 

nav li, li {

display: inline-block;

list-style-type: none;

}

 

nav a {

text-decoration: none;

font-size: 1.2em;

padding: 0px 10px 0px 10px;

font-size: 1.2em;

}

 

nav a:hover {

background-color: white;

}

 

header a {

text-decoration: none;

}

Edited July 23, 2015 by black_pearl

[fastsol]

Without the html is almost impossible to tell you anything.  But it would be much easier to figure out with a link to the actual page.

[black_pearl]

html code : 

http://prntscr.com/7w4wzp

 

css code : 

http://prntscr.com/7w4x6e

 

 

its not on the net yet and i dont know a way to show to you if u know a way please let me know

Edited July 23, 2015 by black_pearl

[fastsol]

Ok, it's most likely the default margin on the h1 and ul tags.  You should use a reset.css file to strip off all the browser default padding and margins.  Then you can set everything the exact way you want it.

 

This is the reset that I use on every website.

/*////////////// CORE FILE DO NOT MODIFY ////////////////////*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

Just include that before your other css file.  You may have to adjust some other things too after using this, but it's truly the best way to do css.

[black_pearl]

oke thank you very i am going to try it out now and let you know

[black_pearl]

and btw how do u get the box to put code in it ?

[black_pearl]

thank you very much the big gap is gone :

 

http://prntscr.com/7w5268

 

and is there a way to even delete the little gap left ? or its just like that?

[fastsol]

Please post your current css and html code here.  Posting it to a image site does nobody any good, we can't copy it to test against.  Just make sure to use the <> button in the WYSIWYG forum post editor to post the code.