请教如何修改侧栏css样式使得侧栏变宽

如图请问如何修改样式使得侧栏扩大，黑色部分消失
下面是我的样式代码
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*****FF悬浮侧栏样式，自动隐藏
updata by defpt 2014.01.26
*/
#sidebar-box {
-moz-appearance: none !important;
position: fixed !important;
top:66px !important;/*设置触发区位置：到窗口顶端的距离*/
left:0px !important;/*设置触发区位置：到窗口左边框的距离*/
/* height: 10px !important; 设置触发区大小*/
width: 1px !important; /*设置触发区大小*/
overflow:hidden !important;/*鼠标离开隐藏*/
border: 0px solid #EE0000 !important;/*此处 8px 设置边框线宽度，选大点就是实心圆点，选小点可设空心圆圈*/
border-radius: 8px !important;
opacity: 0 !important;/*透明度*/
/* transition-duration: 0.2s !important;/*侧栏收缩动画时间*/
/* transition-delay:0.5s !important;/*收缩延时，单位为秒*/
}
#sidebar-box:hover {
top: 65px !important;/*调节侧栏到工具栏的距离*/
left: -1px !important;
width: 30% !important; /*调节侧栏宽度*/
border: 1px solid silver !important;/*调节侧栏边框*/
background:#000 !important;/*弹出侧栏背景*/
height: 100% !important;
opacity:1 !important;/*透明度*/
/* transition-duration: 0.2s !important;/*侧栏展开动画时间*/
/* transition-delay:0.3s !important;/*触发延时，单位为秒*/
}
#sidebar {
height: 780px !important;/*设置侧栏高度，请根据自己实际情况设置该值*/
width: 780px !important;
opacity:1 !important;/*透明度*/
}
#sidebar-header {
width: 100% !important;
font-weight: bold !important;
margin-top: -1px !important;
}
#sidebar-splitter {display: none !important;}