Extra margin appearing on elements with input-block display. How to solve?

I have a problem with my css. He was working out a style to format some buttons. Everything went well. However, my buttons have an extra margin appearing. That is, I did not set margin on my buttons, however they are appearing with margin.

Example:

.container .item{
    background-color: lightgreen;
    display:inline-block;
    margin:0;
    padding:10px;
}

<div class="container">

  <button class="item">Item</button>
  <button class="item">Item</button>
  <button class="item">Item</button>
</div>

Notice that I have defined that the button would have margin:0 , but it has margin.

I noticed that the problem happens because of inline-block , because when I change to block with float:left the problem is solved. See:

.container .item {
   float: left;
   background-color: lightgreen;
   margin:0;
   display:block;
}

<div class="container">

      <button class="item">Item</button>
      <button class="item">Item</button>
      <button class="item">Item</button>
    </div>

But float:left in this case is not desirable, for example, I usually use text-align:right to change button alignments, and this does not work with float:left .

Is there any way to remove those extra margins that are popping up, without taking inline-block from my buttons?