how to offset a CSS border up and left
<p>We have a Wordpress sidebar designed like this:</p>

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

<p>Note the grey border of the large white div is offset up and left (ignore the same effect on the image inside the white div please) - <strong>we want the border offset in our final design</strong>.</p>

<p>I've tried building this with HTML:</p>

<pre><code>&lt;aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"&gt;
  &lt;h2 class="genesis-sidebar-title screen-reader-text"&gt;Primary Sidebar&lt;/h2&gt;
  &lt;section id="text-12" class="widget widget_text"&gt;
    &lt;div class="widget-wrap"&gt;
      &lt;div class="textwidget"&gt;
        &lt;p&gt;&lt;img src="http://amalfi.madhatmedia.com.au/wp-content/uploads/2016/12/fullytiledpoolssidebarbutton.png" alt="fully tiled pools Perth, Melbourne, Adelaide" title="fully tiled pools Perth, Melbourne, Adelaide"&gt;&lt;img src="http://amalfi.madhatmedia.com.au/wp-content/uploads/2016/12/poolrenovationssidebarbutton.png" alt="pool renovations Perth, Melbourne, Adelaide" title="pool renovations Perth, Melbourne, Adelaide"&gt;&lt;img src="http://amalfi.madhatmedia.com.au/wp-content/uploads/2016/12/PoolTilingSidebarbutton.png" alt="pool tiling Perth, Melbourne, Adelaide" title="pool tiling Perth, Melbourne, Adelaide"&gt;&lt;img src="http://amalfi.madhatmedia.com.au/wp-content/uploads/2016/12/PoolResurfacingSidebarbutton.png" alt="pool resurfacing Perth, Melbourne, Adelaide" title="pool resurfacing Perth, Melbourne, Adelaide"&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="/gallery/"&gt;&lt;img src="http://amalfi.madhatmedia.com.au/wp-content/uploads/2016/12/gallery-see-more.png" alt="see our gallery" title="see our gallery"&gt;&lt;/a&gt;&lt;/p&gt;
        &lt;ul class="aligncenter" id="social-icons"&gt;
          &lt;li&gt;&lt;a href="https://www.instagram.com/amalfi_interiors/"&gt;&lt;img src="/wp-content/themes/genesis-sample/images/instagram.png" alt="Follow Amalfi Interiors on Instagram" title="Follow Amalfi Interiors on Instagram" data-pin-nopin="true"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://www.facebook.com/amalfiinteriors/"&gt;&lt;img src="/wp-content/themes/genesis-sample/images/facebook.png" alt="Follow Amalfi Interiors on Facebook" title="Follow Amalfi Interiors on Facebook" data-pin-nopin="true"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://plus.google.com/118279109440835754861/about"&gt;&lt;img src="/wp-content/themes/genesis-sample/images/google.png" alt="Follow Amalfi Interiors on Google+" title="Follow Amalfi Interiors on Google+"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="mailto:steve@doig.com.au"&gt;&lt;img src="/wp-content/themes/genesis-sample/images/email.png" alt="Email Amalfi Interiors" title="Email Amalfi Interiors"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
&lt;/aside&gt;
</code></pre>

<p>and CSS:</p>

<pre><code>.sidebar-primary {
    float: right;
    width: 20.5%;
    margin-right: 2%;
    position: relative;
    z-index: 9999;
    border: 4px solid #494242;
}
.sidebar-primary section {
    margin: 4% -4% -4% 4%;
    position: relative; 
    z-index: 9998;
    opacity: 0.99;
}
</code></pre>

<p>However, on the <a href="http://amalfi.madhatmedia.com.au/contact/" rel="nofollow noreferrer">live page</a> the inner <code>section</code> covers the outer <code>aside</code>'s border on the right and the bottom.</p>

<p>I've set a z-index for the <code>aside</code> (9999) and <code>section</code> (9998), and <code>position: relative;</code> but the issue remains.</p>

<p>Help appreciated.</p>