Зазор между позициями Html между divs

Имейте проблему с html-маской ниже, это код, когда вы открываете страницу, есть пробел между строкой меню и серым ящиком. Я бы хотел избавиться от пространства, поэтому есть только Небольшой разрыв между ними, если кто-то мог бы помочь, был бы весьма признателен.Зазор между позициями Html между divs

HTML:

<html> 

<head> 
<meta content="en-gb" http-equiv="Content-Language"> 
<title>Cleveland Potash Intranet</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
.auto-style1 { 
    text-align: center; 
    margin-left: 1px; 
    margin-top: 11px; 
    font-family: Georgia; 
    margin-right: 0px; 
}s 
#bannerdiv { 
    text-align: center; 
} 
.auto-style4 { 
    margin-left: 0px; 
    text-align: left; 
} 
.auto-style5 { 
    margin-top: 0px; 
} 
</style> 
</head> 

<body> 




<div id="bannerdiv" align="left" title="Banner"> 
    </div> 
<div id="container"> 
    <h3 class="auto-style4" id="container">&nbsp;</h3> 
</div> 
<div id="menubar" style="width: 15%; height: 100px;" title="menu"> 
    <ul> 
     <li><a href="#home" style="height: 20px" class="auto-style5">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#home" style="height: 20px">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#home" style="height: 20px; width: 121px;">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 


    </ul> 
</div> 
<div id="mainpage" class="auto-style1" style="height: 96px; width: 84%; float:right;height:84%; color: #000000; font-size: 11pt;"> 
</div> 




</body> 

</html>

CSS:

#container { 
    margin: 0px; 
    background-color: #008852; 
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
    color: #FFFFFF; 
    text-align: left; 
    max-width: 10%; 
} 

#main 
{ 
height:100%; 
weight:100& 
} 

html, body { 
overflow: hidden; 
height:100%;} 

#menubar 

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
a:link,a:visited 
{ 
    border-top-width: 1px; 
    display: block; 
    font-weight: bold; 
    color: #000000; 
    background-color: #EFF1EB; 
    width: 120px; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    border-style: solid; 
    border-color: #638529; 
    font-family: Arial, Helvetica, sans-serif; 
    border: 1px; 
} 
a:hover,a:active 
{ 
background-color:#7A991A; 
} 
#mainpage { 
    width: 50%; 
    float: left; 
    background-color: #EDEFEE; 
    height: auto; 
    border-radius: 20px ; 
} 
#menubar { 
    border-width: 1px; 
    border-style: none; 
    font-size: xx-small; 
    width: 50%; 
    margin-top:11px; 
    float: left; 
} 
#bannerdiv 
{ 

    margin-bottom:20px; 
} 

.newStyle1 { 
    text-align: left; 
}

источник

2013-07-17 Rob

сделать jsfiddle –

Pff, CSS на 3 места .... Основная причина: '15 + 84 = 99%' ширина! Возможно, вам нужно использовать [box-sizing] (http://css-tricks.com/box-sizing/) и поместить CSS только в файл '.css'. Не встроенный, а не в '