[nkmol]

Why not use a simple float to get rid of the remaining ‘white space’:

.additional-info div {
  width: 32.6%;
  /*display: inline-block;*/
  text-align: center;
  float: left;
}

.additional-info {
  position: relative;
}

.additional-info div {
  width: 32.6%;
  /*display: inline-block;*/
  text-align: center;
  float: left;
}

input[type="checkbox"] {
  float: none;
  display: block;
  margin: 0 auto;
}

<div class="additional-info">
    <p class="text required control-label">Additional info</p>
    <div class="input boolean optional certificate">
        <input name="user[certificate]" type="hidden" value="0">
        <label class="boolean optional control-label checkbox" for="certificate">
            <input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label>
    </div>
    <div class="input boolean optional no_garden">
        <input name="user[no_garden]" type="hidden" value="0">
        <label class="boolean optional control-label checkbox" for="no_garden">
            <input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label>
    </div>
    <div class="input boolean optional has_garden">
        <input name="user[has_garden]" type="hidden" value="0">
        <label class="boolean optional control-label checkbox" for="has_garden">
            <input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label>
    </div>
</div>

[Author]

Posts