Unwanted margin between divs - html

Question

I thought setting all margin and padding to 0 would fix this problem. I notice when I took out the p tags out of the sign div that the margin decreases a little but there looks to still be 1px of white margin between to the topbar div and newbar div that I cannot get rid of. Could someone take a look at this? Here's the code --> http://codepen.io/Chris-Brennan/pen/JYYqrN
Thanks,
Chris
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="bearLogo">
<img src="http://hrsbstaff.ednet.ns.ca/hughson/images/Icons/Icon.bear.gif" alt"bear">
</div>
<div id="signin">
<a href="#"><img src="https://cdn4.iconfinder.com/data/icons/berlin/32x32/sign-out.png"><p>Topbar</p>
</div></a>
<div id="topmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Food</li>
<li>Weather</li>
<li>Iplayer</li>
<li>Bears</li>
<li>More...</li>
</ul>
</div> <!--end-topmenu-->
<div id="searchBox">
<input type="text" placeholder="Search" />
</div>
</div> <!--end-fixedwidth-->
</div> <!--end-topbar-->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
newsbar
</div>
</div>
</div> <!--end-container-->
*{
border-box:sizing;
padding:0px;
margin:0px;
font-family:verdana,helvetica,arial,sans-serif;
}
/*----------------
TOP BAR
-----------------*/
#topbar {
background:#009966;
width:100%;
height:40px;
color:white;
margin:0px;
padding:0px;
}
.fixedwidth {
width:1000px;
height:40px;
margin:0 auto;
padding:0px;
}
#bearLogo{
float:left;
border-right:1px solid #99CCCC;
padding-right:30px;
}
#signin{
float:left;
border-right:1px solid #D8D8D8;
padding:0px 20px 0 20px;
font-weight:bold;
font-size:0.8em;
width:160px;
}
#signin img{
position:relative;
left:5px;
top:5px;
}
#signin p{
position:relative;
top:-23px;
left:44px;
}
#signin a{
color:white;
text-decoration:none;
}
#topmenu{
}
#topmenu ul{
list-style:none;
}
#topmenu li{
padding:12px 20px 12px 20px;
border-right:1px solid #D8D8D8;
float:left;
font-size:0.8em;
}
#topmenu a{
color:white;
}
#searchBox{
float:left;
padding:8px 0px 0 10px;
}
#searchBox input{
width:105px;
height:20px;
border:none;
padding:0px 6px;
font-size:0.7em;
background-image:url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2KAItPd4K87egTfclFiqNByGRK94bRks2XTO_5Vbyo8W0O_pPSA");
background-repeat:no-repeat;
background-position:right center;
}
.break{
clear:both;
}
/*----------------
NEWS BAR
-----------------*/
#newsbar{
float:left;
width:100%;
height:100px;
background:red;
}

Answer 1

A lot of mistakes:
Your #signin div has an extra margin which is coming outside.
Your markup is invalid. You have encapsulated <li> inside <a> tag, which is a crime.
Solutions
#signin {height: 40px;}
#container {background-color: #009966 !important;}
The above is a hack.
Preview:
Fiddle: http://codepen.io/anon/pen/QjyWBd

Answer 2

Like previously mentioned your code could do with a little restructuring but the issue that's causing this specific problem is the top css statement:
#signin p {
position:relative;
top:-23px;
left:44px;
}
I tend not to use negative margins for this reason. If you remove the top statement, the margin disappears. It does move your p tag out of its intended position, but this can be fixed by adding a float:left; to #signin img{ and line-height:36px; to #signin p{ (I would also probably use 3em insetad of 36px).
https://jsfiddle.net/ac0qv98t/

Answer 3

Setting the height of div with id "signin" would solve this problem easily
#signin {
border-right: 1px solid #d8d8d8;
float: left;
font-size: 0.8em;
font-weight: bold;
height: 100%;
padding: 0 20px;
width: 160px;
}