Avoiding spaces in column spaces - margin and padding set to 0 do not work

Question

When I try to open a simple test html in firefox, everything is fine, but when I open it in Chrome or on a mobile device, I get these white spaces between the columns. Does anyone understand why?

If you have an idea how to solve this, I would really appreciate it. The fact is that it works fine with firefox, however Chrome and mobile devices do not recognize this as an object without any spaces.

<div class="container">
    <div class="col-md-4 col-xs-4" style="  padding:0 !important;
  margin:0 !important;
  border:1px solid;
">
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="11" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="12" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="13" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="14" class="button" type="button" style="  background-color:green;
  height:160px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="15" class="button" type="button" style="  background-color:greeen;
  height:160px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="16" class="button" type="button" style="  background-color:green;
  height:160px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="17" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-10 col-xs-10" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="18" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
        <div class="col-md-1 col-xs-1" style="  padding:0 !important;
  margin:0 !important;
">
            <button id="19" class="button" type="button" style="  background-color:green;
  height:40px;
  width:100%;
  border:none;
  display:flexbox;
  padding:0 !important;
  margin:0 !important;
"></button>
        </div>
    </div>
</div>

Answer 1

Buttons are internally embedded elements. Therefore, they have spaces on the right and bottom, like words in a sentence.

, display: block;

, , display: flexbox; , flex, , display: flex; , , .

Answer 2

, .

5px , , . block, , .

, , boostrap 45px, 40px. , .

button {
 height: 45px;
 display: block;
}