Include padding/margin in width percentage?
<p>How can I have <code>width:50%</code> with <code>panel-default</code>, but including <code>padding</code> or <code>margin</code> (not sure which one is more appropriate) in the calculation, so that the <code>panel-default</code> perfectly fills 100% of the width?</p>

<p><a href="https://i.stack.imgur.com/KlFLr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KlFLr.png" alt="SS"></a></p>

<p><strong>Code</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.testing-here {
  padding: 2.5px;
  display: inline;
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
}
.panel-default {
  box-sizing: border-box;
  border-style: none;
  position: relative;
  width: 50%;
  padding-bottom: 40%;
  /* = width for a 1:1 aspect ratio */
  overflow: hidden;
  background-color: #446CB3;
  border-radius: 0px;
  display: inline-block;
}
.panel-body {
  color: white;
  position: absolute;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="testing-here"&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-body"&gt;
      Basic panel example
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>UPDATE:</strong></p>

<p>Right now if I set the <code>width</code> to <code>50%</code> all the panels dropdown vertically because they can't fit side by side.</p>

<p><a href="https://i.stack.imgur.com/N9KCp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N9KCp.png" alt="enter image description here"></a></p>