JQuery & scrollTo: how to specify content location (resizing browser issue)

JQuery & scrollTo: how to specify content location (resizing browser issue)

Hello, I'm wondering if you can help me.

I'm trying to build a horizontal scrolling website following this tutorial on Queness using "jquery-1.3.1.min.js" and "jquery.scrollTo.js". My website sample: http://www.staystylish.com/test/test.html

It looks fine if you have a 1280px wide resolution. But if you resize the window (bigger or smaller), the content box auto centre itself. I want to specify a location for the content box so that it remains the same place all the time.

How can I make the content remain at the same place when I resize window (instead of auto centre)?

Is it something to do with one of the jQuery scripts used? If so, which one and how do i change?

or is it my CSS?

This is my CSS:

  1. #wrapper {
        width:100%;
        height:100%;
        position:absolute;
        top:0;left:0;   
        overflow:hidden;
    }

        #mask {
            width:500%;
            height:100%;       
        }

        .item {
            width:20%;
            height:100%;
            float:left;       
        }
       
       
        .content {
            width:940px;
            height:400px;
            top:240px;
            margin:0 auto;
            position:relative;
            display: block;
            border: 1px solid #000;
            z-index:0 !important;
        }