I am new here, so I hope this is the correct place to post this. I have tried to get support for this issue on both the theme’s forum and on Wordpress.org’s forums with no luck. Someone suggested I come here. Here is my issue:
I decided to use a background image on my self-hosted Wordpress blog and have been successful to a point. My sidebars are hidden and “float” out when you click on the icons for the menu sidebar on the left and the regular sidebar on the right. If you click on them (on something other than a mobile device), there’s a white gap between the background image and the gray sidebar color. After digging around in the style.css all of yesterday and today, I am exhausted. I would love some insight from some loving soul out there.
Here is my site: http://dappledthings.me
Here is the part of my style sheet that I think may be relevant:
/*-----------------------------------------------------------------------------------*/
/* Off Canvas Layout
/*-----------------------------------------------------------------------------------*/
.content-wrap:before,
.content-wrap:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: -100%;
width: 100%;
height: 100%;
}
.content-wrap:after {
left: 100%;
}
#site-header,
.sidebar-left,
.content-wrap,
.sidebar-right {
width: 100%;
display: block;
position: relative;
}
body.active-sidebar,
.sidebar-left,
.sidebar-right {
background: #f2f2f2;
}
#site-header {
overflow: hidden;
text-align: center;
z-index: 4;
background-image:url('http://dappledthings.me/wp-content/uploads/2013/07/bg4.png');
background-attachment: fixed;
}
/* JavaScript On */
.js .sidebar-left {
height: 0;
overflow: hidden;
margin-left: -100%;
margin-top: 0;
float: left;
}
.js .content-wrap {
position: relative;
margin-left: 0;
left: 0;
right: 0;
float: left;
z-index: 2;
}
.js .sidebar-right {
height: 0;
overflow: hidden;
margin-left: 100%;
margin-top: 0;
z-index: 1;
float: left;
}
/* Active Left Sidebar */
.js body.active-nav {
background: #f2f2f2;
}
.js .active-nav .off-canvas-nav {
position: fixed;
z-index: 2;
width: 100%;
overflow: hidden;
left: 81.25%;
right: auto;
top: 0;
-webkit-transition: left 0.2s ease-out;
-moz-transition: left 0.2s ease-out;
-o-transition: left 0.2s ease-out;
-ms-transition: left 0.2s ease-out;
transition: left 0.2s ease-out;
}
.active-nav .sidebar-left {
position: relative;
margin-left: 0;
width: 81.25%;
margin-top: 0;
height: auto;
float: left;
}
.js .active-nav .content-wrap {
position: fixed;
overflow: hidden;
width: 100%;
left: 81.25%;
right: auto;
top: 50px;
background: #fff
-webkit-transition: left .2s ease-out;
-moz-transition: left .2s ease-out;
-o-transition: left .2s ease-out;
-ms-transition: left .2s ease-out;
transition: left .2s ease-out;
}
.mask-left {
visibility: hidden;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
z-index: 1002;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
-moz-box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
box-shadow: -4px 0 6px rgba(84, 84, 84, .1);
}
.active-nav .mask-left {
visibility: visible;
left: 81.25%;
opacity: 0.8;
background: #fff
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-webkit-transition: .01s opacity ease 0.2s;
-moz-transition: .01s opacity ease 0.2s;
-o-transition: .01s opacity ease 0.2s;
-ms-transition: .01s opacity ease 0.2s;
transition: .01s opacity ease 0.2s;
}
.active-nav .sidebar-right {
position: absolute;
overflow: hidden;
left: 109.765625%;
}
/* Active Right Sidebar */
.js .active-sidebar .off-canvas-nav {
position: fixed;
z-index: 2;
width: 100%;
overflow: hidden;
right: 81.25%;
left: auto;
top: 0;
-webkit-transition: right 0.2s ease-out;
-moz-transition: right 0.2s ease-out;
-o-transition: right 0.2s ease-out;
-ms-transition: right 0.2s ease-out;
transition: right 0.2s ease-out;
}
.active-sidebar .sidebar-left {
position: absolute;
overflow: hidden;
right: 109.765625%;
}
.js .active-sidebar .content-wrap {
position: fixed;
overflow: hidden;
width: 100%;
right: 81.25%;
left:auto;
top: 50px;
background: #fff
-webkit-transition: .2s right ease-out;
-moz-transition: .2s right ease-out;
-o-transition: .2s right ease-out;
-ms-transition: .2s right ease-out;
transition: .2s right ease-out;
}
.mask-right {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
visibility: hidden;
z-index: 1002;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
-moz-box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
box-shadow: 4px 0 6px rgba(84, 84, 84, .1);
}
.active-sidebar .mask-right {
right: 81.25%;
visibility: visible;
opacity: 0.8;
background: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-webkit-transition: .01s opacity ease 0.2s;
-moz-transition: .01s opacity ease 0.2s;
-o-transition: .01s opacity ease 0.2s;
-ms-transition: .01s opacity ease 0.2s;
transition: .01s opacity ease 0.2s;
}
.active-sidebar .sidebar-right {
position: relative;
margin-left: 18.75%;
width: 81.25%;
margin-top:0;
height:auto;
float:left;
}
/* Off Canvas Nav Buttons */
.off-canvas-nav {
width: 100%;
overflow: hidden;
background: #fff
left: 0;
right: 0;
}
.off-canvas-nav .menu-item,
.off-canvas-nav .sidebar-item {
width: 18.75%;
display: block;
float: left;
}
.off-canvas-nav .sidebar-item {
float: right;
}
.off-canvas-nav .menu-button,
.off-canvas-nav .sidebar-button {
display: block;
width:100%;
height:50px;
text-indent: -99999px;
}
.off-canvas-nav .menu-button {
background:#f2f2f2 url(images/menu-btn.png) 50% 0 no-repeat;
}
.off-canvas-nav .sidebar-button {
background:#f2f2f2 url(images/sidebar-btn.png) 50% 0 no-repeat;
}
/* Position Fixed Iframe Bugfix */
.js .active-nav .entry-content iframe,
.js .active-sidebar .entry-content iframe {
display: none;
}
.js .active-nav .entry-content .fluid-width-video-wrapper,
.js .active-sidebar .entry-content .fluid-width-video-wrapper {
background: #fff
}
/* Equal Height Column Fix in Off-Canvas Mode */
.active-nav .column-wrap,
.active-sidebar .column-wrap {
overflow: hidden;
background: #fff
}
.active-nav #content-wrap,
.active-nav .sidebar-left,
.active-sidebar #content-wrap,
.active-sidebar .sidebar-right {
padding-bottom: 99999px !important;
margin-bottom: -99999px !important;
}
.active-nav #content-wrap,
.active-sidebar #content-wrap {
background: #fff
}
Any help would be greatly appreciated! 
Gail