Change width of offcanvas-menu that needs to appear on right of screen

This is in regards to zurb-foundation 5.3. I do not know scss so I am using the css version of foundation 5.3. I am following this very basic example for offcanvas menu from foundation docs. This offcanvas-menu seemed to have a default width. Since, I wanted a custom-width, I found a solution on SO that helped me specify custom-width. Everything worked as expected in this case, when the offcanvas content appeared on the left of the screen.

Now. I made some changes in the code as I wanted the offcanvas-content to appear on the right of the screen. Here is the code that does not work. I mean, it does appear on the right of the screen but with default width, and not in the width I specified.

    **** HTML ****

    <div class="lorem off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">    

             <!-- on-canvas-content -->
             <p>some on-canvas main content here</p>

             <!-- off-canvas-content -->
             <aside class="lorem right-off-canvas-menu">
                 <div class="inner-canvas-content">
                     <p>some off canvas menu or other contents here</p>
                 </div>
             </aside>

         <a class="exit-off-canvas"></a>

         </div><!-- end inner-wrap -->
     </div><!-- end offcanvas-wrap -->


     **** CSS ****
     .lorem.move-left > .inner-wrap {
     webkit-transform: translate3d( 500px, 0, 0);
     -moz-transform: translate3d( 500px, 0, 0);
     -ms-transform: translate3d( 500px, 0, 0);
     -o-transform: translate3d( 500px, 0, 0);
     transform: translate3d( 500px, 0, 0);
     }

     .lorem.right-off-canvas-menu {
     width: 500px;
     }

Solved it. I missed the obvious fact that if we need to push the block to left of the screen, the margins will go negative. Something like below in this case.

.lorem.move-left > .inner-wrap {
     webkit-transform: translate3d( -500px, 0, 0);
     -moz-transform: translate3d( -500px, 0, 0);
     -ms-transform: translate3d( -500px, 0, 0);
     -o-transform: translate3d( -500px, 0, 0);
     transform: translate3d( -500px, 0, 0);
 }