title: Misaligned "outline" with uneven number of divs
body: <p>My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the <code>border</code> property and it still didn't look right. However when I use <code>outline</code> or <code>box-shadow</code>, I get this alignment issue at the end.</p>
  
  <p><a href="https://i.stack.imgur.com/pGYxf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pGYxf.png" alt="misaligned outline"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.inner {
    outline: 1px solid black;
    width: 50%;
    height: 50px;
    float: left;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inner"&gt;
  
  &lt;/div&gt;
  &lt;div class="inner"&gt;
  
  &lt;/div&gt;
  &lt;div class="inner"&gt;
  
  &lt;/div&gt;
  &lt;div class="inner"&gt;
  
  &lt;/div&gt;
  &lt;div class="inner"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.</p>
  
  <p>What is the proper way to achieve this where the last element lines up the border(or outline) correctly?</p>