title: 3 elements with 33.33% width exceed 100%?
body: <p>I have a div with 3 elements (h2's). The div is 100% but when I set the width for each h2 inside the div to 33.33% the 3rd div will go down a line. 33% works, but then I have extra space left which is almost unnoticeable, but is still a problem for me. How do I fix this so the 3 h2's fit inside a 100% div so that the first h2 aligns to the left, the second centers in the middle, and the last one aligns to the right? Maybe even without having to use numbers, such as 33.33%?</p>
  
  <p>This is what I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-md-12 bottomPadding"&gt;
     &lt;h2 class="floatLeftBottom"&gt;&lt;a href="/"&gt;Edit&lt;/a&gt;&lt;/h2&gt;
     &lt;h2 class="floatCenterBottom"&gt;&lt;a href="/"&gt;Delete&lt;/a&gt;&lt;/h2&gt;
     &lt;h2 class="floatRightBottom"&gt;&lt;a href="#"&gt;Move up&lt;/a&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.floatLeftBottom {
      display: inline-block;
      width: 33%;
      text-align: left;
      padding-bottom: 10px;
  }
  
  .floatCenterBottom {
      display: inline-block;
      width: 33%;
      text-align: center;
      padding-bottom: 10px;
  }
  
  .floatRightBottom {
      display: inline-block;
      width: 33%;
      text-align: right;
      padding-bottom: 10px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/J3AOx.png" rel="nofollow noreferrer">picture</a></p>