html - HTML5 layout issue with select list and buttons -

i trying layout few div elements. div element hosts select element , 3 buttons. while don't want set specific size buttons, wish select list occupy remaining space.

as can see, kind of list stretch without spacing. tried force padding through css without luck. missing something.

here code:

#presets {      display: flex;      padding: 3px;      margin: auto;  }    #presets select {      width: 100%;   }    #presets button {     padding-right: 5px;  }

<div id="presets">        <select>            <optgroup ng-repeat="item in qo.presets">                 <option>{{item.name}}</option>            </optgroup>        </select>        <button>rm</button>        <button>ed</button>        <button>ad</button>  </div>

thanks in advance hints,

it should working following stylesheet:

#presets {     display: flex;     padding: 3px;     margin: auto; }  #presets select {     margin-right:5px;     width: 100%;  }  #presets button {     margin-right:5px; }  #presets button:last-child {     margin-right: 0; } 

use margin instead of padding.