html - これら 2 つの div セクション間のギャップを削除するにはどうすればよいですか?

Question

私の HTML コードはこのように見えますが、何らかの理由で位置がずれたり、制御不能なギャップが挿入されたりします。

<section id="boxes">

<div id="boxes1">
<ul>
<li>Justs the Facts</li>            
</ul>
</div>

<div id="boxes2">
<ul>
<li>Visit Neptune</li>
</ul>
</div>

</section>

関連する CSS は次のとおりです。

#boxes {
  width:700px;
  background-color: #ffffff
}
#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
} 

これにより、間にギャップがある 2 つのブロックのようなものが作成されます。boxes1vsの div セクションの間にマージンやギャップがないようにするにはどうすればよいboxes2ですか?

Answer 1

#boxes1{
width: 50%;
float: left;
#boxes2 {
width: 50%;
float: left; 
} 

これを試して...

Answer 2

これは、div要素を反対方向に浮かせているためです。

#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

両方を左に浮かせます。

#boxes1, #boxes2 {
  width: 350px;
  float: left;
}

Answer 3

これを使って。

#boxes ul {
    margin:0;
    padding:0;
}

Answer 4

2 つのボックスを同じ方向 (右または左) に浮かせる必要があります。

#boxes1{
width: 350px;
float: left; /*or right*/ }
#boxes2 {
width: 350px;
float: left; /*or right*/ 
}