Smythu Smythu - 1 year ago 58
CSS Question

Flexbox right space on the right side

Hey whenever I use display: flex the right side of my row has a bit of a space. How can I fix that? You can't see it that good in jsfiddle, only if you use Firebug or whatever.

I know its because of the margin, but I need the margin..

<div class="input-group" style="display: flex; justify-content: space-between; align-items: center;">
<input type="text" class="tile-txt" placeholder="Box 1">
<input type="text" class="tile-txt" placeholder="Box 2">

Answer Source

it happens because your second (last) input element has a margin-right of 5px remove it and it'll be as desired: DEMO

    margin: 0 0 5px 0;


if you have more than one row you need to remove the margin from the elements which their index is even: DEMO

    margin: 0 0 5px 0;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download