title: How do I set margins for buttons on the same row in a responsive way?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button type="submit" class="btn btn-primary btn-lg btn-submitpadding"&gt;Submit&lt;/button&gt;
          &lt;a href="/select-all" class="btn btn-default btn-selectspacer"&gt;Select All&lt;/a&gt;
          &lt;a href="/deselect-all" class="btn btn-default"&gt;Deselect All&lt;/a&gt;
          &lt;a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo"&gt;More Info&lt;/a&gt;&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.btn-selectspacer {
      margin-left: 40em;
  }
  
  .btn-infospacer {
      margin-left: 2.25em;
  }
  
  .btn-submitpadding {
      padding-top: 7px;
      padding-bottom: 7px;
  }
  </code></pre>
  
  <p><strong>Image</strong>
  <a href="http://i.stack.imgur.com/XcQae.png" rel="nofollow">Button Spaced with margins horizontally</a></p>
  
  <p>Thank you,
  Alex</p>