Left sidebar unmovable!

Hi, thank you for reading my post.

I've been trying to tackle this problem for over 10 hours now... Please help %-)

I am trying to decrease left sidebar/ left column in order to increase centre column to the left. I've been fighting with the style.css file but I can't seem to be able to change a position of the "line" separating left column from the centre one (see picture).

This is relevant css from summertime/style.css that I am starting with:

.column-left{
width: 20%;
padding:20px 10px 0;
float: left;
overflow: hidden;

}

.column-center{
width: 68.5%;
float: left;
overflow: hidden;
border-right: 1px solid #BAD4A7;

}

.col-cent-border{

border-left: 3px solid #fff;
border-right: 3px solid #fff;
float: left;
padding: 20px 30px 40px;
width: 85.5%;

}

.column-right{
width: 26%;
border-left:1px solid #BAD4A7;
padding:20px 0 0 16px;
float: left;
margin-left:-1px;
overflow: hidden;

}

.right-col-main{

float: right;
width: 77%;

background: #fff url(images/colunm-right-bg.gif) repeat-x top left;
border-left:1px solid #BAD4A7;
border-bottom: 1px solid #C7E1E4;
}

Looking through similar issues I have tried decreasing column-left width and increasing column right width by the same percentage, but if column right is increased by too much it just drops down below left & centre columns.

When I decrease % of column-left, only Admin menu links & bottom horizontal line decrease

If I decrease margin on col-cent-borded only white border line moves

If I increase column centre width it only increases in the right hand side direction, finally pushing the right column down

I attach picture (it's a mess to show you which line exactly I mean) and changed css code to make it look like this is below.

.column-left{
width: 10%;
padding:20px 10px 0;
float: left;
overflow: hidden;

}

.column-center{
width: 68.5%;
float: left;
overflow: hidden;
border-right: 1px solid #BAD4A7;
margin-left:-20px

}

.col-cent-border{

border-left: 3px solid #fff;
border-right: 3px solid #fff;
float: left;
padding: 20px 30px 40px;
width: 85.5%;
margin-left:-20px;
}

.column-right{
width: 26%;
border-left:1px solid #BAD4A7;
padding:20px 0 0 16px;
float: left;
margin-left:-1px;
overflow: hidden;

}

.right-col-main{

float: right;
width: 77%;

background: #fff url(images/colunm-right-bg.gif) repeat-x top left;
border-left:1px solid #BAD4A7;
border-bottom: 1px solid #C7E1E4;
}

On another hand, is it possible that any of the modules I have installed could have overwritten style.css? Should I look to change this settings in stylesheet of any of the modules that I use (these are: calendar, cock, context, ctolls, date, debut, debut_event, debut_image, features, filefield, imageapi, jquery_ui, jquery_update, menu_block, menu_breadcrumb, page_title, pathauto, strong-arm, token, views)

Any help would be greatly appreciated!

Thank you!