Why is there a gap between divs?

Question

css

I type in Bootstrap, I didn't make any changes to the files.
The structure is as follows:

<div>
  <div>
     <button></button>
     <button></button>
  </div>
</div>

The main div is in the bootstrap column, its width is 100%, the div with the buttons is also 100%.
The buttons have a width of 50% and float left and right respectively.
As the width changes, there is a gap between them, what's the problem ? And even changing the width by 1px gives different results.

Answer 1

If you use bootstrap then form a grid using its classes, why bike:

<div class='container'>
  <div class='row'>
     <button class='col-xs-6'></button>
     <button class='col-xs-6'></button>
  </div>
</div>

---
The 'row' class removes just the same margins on the sides (margins of 15px). literature

Answer 2

button {
margin: 0;
padding: 0;
}

Answer 3

try this for example

<div>
  <div>
     <button class='col-lg-6 col-md-6 col-sm-6'></button>
     <button class='col-lg-6 col-md-6 col-sm-6'></button>
  </div>
</div>