How do I remove the gap between these two div sections?

How do I remove the gap between these two div sections?

all. My html code looks a bit like this, and for some reason it keeps
misaligning or inserting an uncontrollable gap.
<div id="boxes1">
<ul>
<li>Justs the Facts</li>
</ul>
</div>
<div id="boxes2">
<ul>
<li>Visit Neptune</li>
</ul>
</div>
</section>
The relevant CSS is here:
#boxes{
width:700px;
background-color: #ffffff
}
#boxes1{
width: 350px;
float: left; }
#boxes2 {
width: 350px;
float: right;
}
This creates something like two blocks, with a gap in between. How could I
create it so that there's no margin or gap between the div section of
"boxes1" versus "boxes2"?