title: Firefox div background 1px wider than border, but only with certain content lengths
body: <p>I'm having an issue with a <code>&lt;div&gt;</code> I use to display messages to users. It's very basic stuff. But in FireFox, the background is sometimes wider than the border. See the attached image. The three blocks are exactly the same except the content, but only the middle one has the extra 1px to the right.</p>
  <p>First I though it had something to do with Bootstrap. But the issue is still there with a very basic page. Has anyone a quick fix or do I need to use a parent container and rewrite the message code entirely.
  Tried to experiment with the font size, padding etc but then it simply appears when a different text length is shown.</p>
  <p>I use FireFox v 81.0</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body style=&quot;background-color: #181818&quot;&gt;
  
      &lt;style&gt;
          .vdwwd_messages {
              font-family: Verdana;
              padding: 15px;
              font-size: 1rem;
              font-weight: bold;
              position: fixed;
              top: 23%;
              left: 50%;
              min-width: 400px;
              max-width: 800px;
              transform: translate(-50%, 0%);
              background-color: #fce7e7;
              border: 8px solid #bf1616;
  
              -moz-box-sizing: border-box; //does nothing
          }
      &lt;/style&gt;
  
      &lt;div class=&quot;vdwwd_messages&quot;&gt;
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      &lt;/div&gt;
  
      &lt;div class=&quot;vdwwd_messages&quot; style=&quot;margin-top: 100px;&quot;&gt;
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx
      &lt;/div&gt;
  
      &lt;div class=&quot;vdwwd_messages&quot; style=&quot;margin-top: 200px;&quot;&gt;
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxx xxxx xx
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UaDVM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UaDVM.jpg" alt="enter image description here" /></a></p>
  <p><strong>Different content widths</strong></p>
  <pre><code>&lt;div class=&quot;vdwwd_messages&quot;&gt;
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  &lt;/div&gt;
  
  &lt;div class=&quot;vdwwd_messages&quot; style=&quot;margin-top: 100px;&quot;&gt;
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xx
  &lt;/div&gt;
  
  &lt;div class=&quot;vdwwd_messages&quot; style=&quot;margin-top: 200px;&quot;&gt;
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxx
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/7Ys7W.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Ys7W.jpg" alt="enter image description here" /></a></p>