Volusion Override CSS page width - css

Question

I'm having an absolute nightmare with Volusion! Basically, I want to make my page wider so that I can fit more on it, and have a bit of an experiment with how the page is set out.
I've tried editing the CSS but it either doesn't change or everything seems to move out of place! This is the CSS i'm attempting to work with:
div.pages_available_text {
font-size: 17px !important;
font-weight: bold !important;
}
a{text-decoration:none;}
a,a:visited,a:active{outline-style:none;}
a:hover{text-decoration:underline;
color:#79CDCD;}
img{border:none!important;}
.begin{border:none !important;}
.end{border:none !important;}
.bold{font-weight:bold !important;}
.highlight{color:#06a0cf !important;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.none{display:none !important;}
.block{display:block !important;}
.inline{display:inline !important;}
/* ############################### FIXES ############################### */
.qe_toolbar_ovr{z-index:9999 !important;} /*admin box*/
/* ############################### WINTER 09 STYLES ############################### */
.next_page_img{width:auto !important; height:auto !important;}
.previous_page_img{width:auto !important; height:auto !important;}
.soft_add_content_area span, .quantity{color:#000;}
.soft_add_wrapper {z-index:1100;}
/* ############################### PAGE WRAPPER ############################### */
body{
background-color:#ffcd05;
color:#505050;
font: normal 17px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center;
}
#page{
margin:0 auto;
text-align:left;
width:980px;
}
div{
font-size: 15px;
font:Arial, Helvetica, sans-serif;
}
#app {
color:#FFFF00;
font-size:20px;
text-align:center;
border-radius: 5px;
background-color:#000000;
clear:both;
border:none;
float:left;
width:160px;
padding:5px;
font-family:Coolsville, Cursive, sans-serif;
margin-bottom:10px;
}
#download {
height:70px;
width:71px;
}
#video {
align:middle;
}
/* ############################### HEADER ############################### */
#header{
background:url(../images/template/header_bg.jpg) no-repeat 22px 35px;
height:180px;
margin:0 auto;
padding:0;
position:relative;
width:980px;
}
#header div#display_homepage_title{
height:50px;
left:22px;
margin:0;
padding:0;
position:absolute;
top:77px;
width:400px;
}
#header div#display_homepage_title a{
display:block;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
text-align:left;
text-indent:-9999px;
top:0;
width:100%;
}
#header div a#homepage_title{
background:none;
color:#2c2c2c;
font-size:20px;
text-indent:0;
}
#header .top{
background:url(../images/template/divider.gif) repeat-x 0 bottom;
color:#202020;
font-size:13px;
margin:0;
padding:1px 1px 2px;
text-align:right;
}
#header .top a{
border-right:1px solid #202020;
display:inline-block;
color:#202020;
font-size:13px;
height:13px;
padding:0 0px;
vertical-align:middle;
}
.app {
padding:10px;
}
.social {
padding:5px;
float:center;
}
/* ############################### SEARCH BOX */
#display_search{
background:url(../images/template/searchBg.gif) no-repeat 0 0;
float:right;
bottom:5px;
height:21px;
margin:12px 20px 0 0;
width:213px;
}
#display_search form{
height:100%;
margin:0;
padding:0;
width:100%;
}
#display_search #search_input{
background:none;
border:none;
color:#2c2c2c;
display:block;
float:left;
font:normal 12px Arial, Helvetica, sans-serif;
margin:0;
padding:4px 10px 2px 10px;
text-align:left;
width:168px;
}
#display_search #search_submit{
background:none;
border:none;
color:#fff;
cursor:pointer;
display:block;
float:right;
font-size:0;
height:21px;
margin:0;
padding:0;
text-align:right;
text-indent:-9999px;
width:24px;
}
/* ############################### SHOPPING CART DISPLAY */
#header .cart{
color:#202020;
font-size:13px;
float:right;
margin:8px 8px 0 0;
text-align:right;
}
#header .cart a{color:#202020;}
#display_cart_summary,
.cartsummary_full,
.cartsummary_empty{display:inline;}
#display_cart_summary a{display:none !important;}
/* ############################### TOP NAVIGATION ############################### */
#topnav{
background:url(../images/template/divider.gif) repeat-x 0 0;
min-height:52px;
margin:0 auto;
padding:2px 0px 0;
width:980px;
}
/* ############################### CONTENT ############################### */
#content{
background:url(../images/template/contentBg.gif) repeat-y 0 0;
margin:0 auto;
width:980px;
}
#content .inner{
padding:0px 10px 0;
margin-left:8px ;
}
/* ############################### LEFT_NAV ############################### */
#leftnav{
float:left;
width:190px;
}
#leftnav h3{
font-size:17px;
font-weight:normal;
padding:5px 5px 5px 15px;
text-transform:uppercase;
}
#leftnav .menu{padding-bottom:28px;}
/* ############################### PROMOTIONS */
#display_promotions_999{
margin:0;
padding:10px 0;
text-align:center;
vertical-align:middle;
width:1200px;
}
/* ############################### CONTENT AREA ############################### */
#content_area{
float:right;
padding:0 10px;
text-align:left;
width:700px;
}
#content #content_area table{text-align:left;}
/* ############################### FOOTER ############################### */
#footer{
background:url(../images/template/contentBot.gif) no-repeat 0 0;
margin:0 auto;
padding-top:10px;
width:980px;
}
#footer .top{
background:#2c2c2c url(../images/template/footerBg.gif) no-repeat 0 bottom;
color:#000000;
font-size:13px;
padding:20px 20px 15px;
width:940px;
}
/* ############################### MAILING LIST */
#eList{
float:right;
width:186px;
}
#eList div.title{
color:#ffcd05;
font-size:13px;
font-weight:bold;
margin:0 5px 6px 0;
text-align:right;
}
#eList form{
background:url(../images/template/elistBg.gif) no-repeat 0 0;
height:22px;
margin:0;
padding:0;
width:186px;
}
#elist_input{
background:none;
border:none;
color:#fff;
display:block;
float:left;
font:normal 11px Arial, Helvetica, sans-serif;
margin:0;
padding:5px 10px 3px 10px;
text-align:left;
width:145px;
}
#elist_submit {
background:none;
border:none;
color:#2c2c2c;
cursor:pointer;
display:block;
float:right;
font-size:0;
height:22px;
margin:0;
padding:0;
text-align:right;
text-indent:-9999px;
width:20px;
}
#footer .top ul{
float:left;
list-style:none;
margin:0;
padding:0;
width:188px;
}
#footer .top ul li.title{
color:#ffcd05;
font-weight:bold;
}
#footer .top ul li{
color:#fff;
font-size:13px;
padding-bottom:4px;
}
#footer .top ul li a{
color:#fff;
}
#footer .bottom{
color:#505050;
font-size:12px;
line-height:20px;
margin:20px auto;
text-align:center;
width:999px;
}
#footer .bottom a{
color:#505050;
}
I'm ok with HTML and CSS but pretty hopeless at anything else and i've read so many articles and forums but can't seem to get anywhere!

Answer 1

If you are referring to the mytoolkit.co.uk site, you are editing the wrong element. You need to make the page container div wider and then work your way down from there.
In your case, it looks like you need to edit the div with the ID "page". For example:
#page {width:1024px}
Then you would edit any additional child divs like the header, content, and footer divs.