title: how to offset a CSS border up and left
body: <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>