title: HTML5 border not fitting in <div> to margin-right
body: <p>I took over a mobile app with AngularJS and Ionic 1.x (yes, old - I know). Inside this <code>&lt;ion-content&gt;</code> I would like to have the part of the email always being 10px away from the right border; independent of the media size. See screenshot in case please.
  <a href="https://i.stack.imgur.com/ifylB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ifylB.png" alt="enter image description here" /></a></p>
  <p>Here is the relevant part of my .html-file:</p>
  <pre><code>&lt;ion-content scroll=&quot;true&quot; class=&quot;pdfsmtp&quot;&gt;
      &lt;h5 class=&quot;left&quot;&gt;1. Email-Adresse:&lt;/h5&gt;
      &lt;div class=&quot;middle&quot;&gt;
           &lt;button ng-click=&quot;changeEmail(0)&quot; ng-controller=&quot;EmailsCtrl&quot;
             class=&quot;button button-small button-block button-outline&quot;&gt;{{emails[0]}}&lt;/button&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;h5 class=&quot;left&quot;&gt;2. Email-Adresse:&lt;/h5&gt;
     (...)
  &lt;/ion-content&gt;
  </code></pre>
  <p>Here is how the .css-file looks like:</p>
  <pre><code>.pdfsmtp 
  {
    .button-bar 
    {
      width: 80%;
      margin: auto;
    }
  
    .left
    {
      margin-left: 20px;
      margin-right: 20px;
      display: inline-block;
      color: white;
    }
  
    .middle
    {
      text-align: center;
      width: 200px;
      display: inline-block;
    }
  
    .button-icon
    {
      margin-left: 20px;
      color: white;
    }
  }
  
  @media (min-width: 736px) and (max-width: 1023px) 
  {
    .players.modal 
    {
      top: 12%;
      bottom: 12%;
    }
  }
  </code></pre>
  <p>My question is: How to have my goal achieved? I tried several approaches, but none worked so far...</p>