how to offset a CSS border up and left

We have a Wordpress sidebar designed like this:

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) - we want the border offset in our final design.

I've tried building this with HTML:

<aside aria-label="Primary Sidebar" itemscope="" itemtype=""> <h2>Primary Sidebar</h2> <section> <div> <div> <p><img src="" alt="fully tiled pools Perth, Melbourne, Adelaide" title="fully tiled pools Perth, Melbourne, Adelaide"><img src="" alt="pool renovations Perth, Melbourne, Adelaide" title="pool renovations Perth, Melbourne, Adelaide"><img src="" alt="pool tiling Perth, Melbourne, Adelaide" title="pool tiling Perth, Melbourne, Adelaide"><img src="" alt="pool resurfacing Perth, Melbourne, Adelaide" title="pool resurfacing Perth, Melbourne, Adelaide"></p> <p><a href="/gallery/"><img src="" alt="see our gallery" title="see our gallery"></a></p> <ul> <li><a href=""><img src="/wp-content/themes/genesis-sample/images/instagram.png" alt="Follow Amalfi Interiors on Instagram" title="Follow Amalfi Interiors on Instagram"></a></li> <li><a href=""><img src="/wp-content/themes/genesis-sample/images/facebook.png" alt="Follow Amalfi Interiors on Facebook" title="Follow Amalfi Interiors on Facebook"></a></li> <li><a href=""><img src="/wp-content/themes/genesis-sample/images/google.png" alt="Follow Amalfi Interiors on Google+" title="Follow Amalfi Interiors on Google+"></a></li> <li><a href="mailto:"><img src="/wp-content/themes/genesis-sample/images/email.png" alt="Email Amalfi Interiors" title="Email Amalfi Interiors"></a></li> </ul> </div> </div> </section> </aside> 

and CSS:

.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; } 

However, on the live page the inner section covers the outer aside's border on the right and the bottom.

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

Help appreciated.

2 Answers

Use this principle

* { box-sizing: border-box; } .container { height: 200px; width: 200px; position: relative; background-color: red; margin: 20px; } .inner { width: 100%; height: 100%; position: absolute; border: 2px solid black; top: -10px; left: -10px; z-index: 10; }

<div> <div> </div> </div>

For your page you need to find setion with class="text-12" and update it's code as follows

<section> <div> <div> </div> <div> <!--Rest of the code stays same--> </div> </div> </section> 

I used inline-css here and it is working but be careful when you shift inline css to your stylesheet

you have given margin to section to -4%; please change it to

.sidebar-primary section { margin: 4% 4% 4% 4%; } 

i hope it'll help you