I currently have a few buttons on a line that I have horizontally but would like to add margins to push the buttons away from each other.

I was editing my code in a smaller window and the buttons were spaced fine using CSS margins, but when I maximized the window I noticed that the margins between the buttons either pushed some buttons to a new line or pulled them back.

I haven't been able to find a way to set margins for these buttons on the same row in a responsive way so they don't push to a new line or pull back.

Any ideas?

**HTML**

```
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
        <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a>
        <a href="/deselect-all" class="btn btn-default">Deselect All</a>
        <a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>

```

**CSS**

```
.btn-selectspacer {
    margin-left: 40em;
}

.btn-infospacer {
    margin-left: 2.25em;
}

.btn-submitpadding {
    padding-top: 7px;
    padding-bottom: 7px;
}

```

**Image**
[Button Spaced with margins horizontally](http://i.stack.imgur.com/XcQae.png)

Thank you,
Alex