Q:

Avoid scrolling to off-canvas content

I am doing a small tutorial on responsive design, but I have a problem.
I am going with the classic off-canvas menu swiping in from the left side, but when I enable the menu I can still scroll horizontally to see the full content, rather than using the menu-button to hide the menu.
See the following pen:
http://codepen.io/webconsult/pen/jmCit
Note that codepen hides the  tag. For the meta viewport tag I am using:
<meta name="viewport" content="width=device-width, initial-scale=1">

I am suspecting that I should set up the the viewport tag differently?
You can play around with the viewport tag by clicking on the settings-cog in the html frame.

A:

Add this to your css
body {
overflow-x:hidden;
}

you have 
.site-wrapper {
width:100%;
}

according to your css  on larger screens the main content occupies 100% of width. On smaller screens when you open your off-canvas menu - it produces horizontal-scroll because your .site-wrapper+off canvas occupy more than 100% of width -100% for warrper + 75% aside.navigation. 
By adding overflow-x:hidden; on body it will the scroll-bar.
This is not the best solution though - having 
.site-wrapper {
  overflow-x:hidden;
}

is better but something is up with your header -behaves a little wierd when i add this property.

