Blueprint CSS: Page moves to left side if the content is long
===

I am using Blueprint CSS framework and currently facing a strange problem. If the content of my page gets longer than the monitor screen and the footer goes below, then the entire page moves a bit to its left side, but if I cut short the content and make it fit withing the 
screen so that the footer is visible (without having to scroll down), then the page moves back to the right side again.

I am not sure but I am guessing its `clearfix` issue. Do you think the same?

Could you please tell me how to fix this problem so that the page doesn't move to the left side even if the content is very long?

My page structure is like following


    <div class="container"> 
      
       <div id="header" class="span-24 "> Header </div>
   
       <div id="content" class="span-24" >My Main Content with two columns </div>

      <div id="header" class="span-24 "> Header </div>

    </div>

CSS

    #header{
    margin-top:5px;
    background-color:#333333;
    border: solid 1px #333333;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
    height:70px;
    }
		
    #content{
    margin-top:2px;
    min-height:500px;
    font-size:12.5px;
    line-height:30px;
    background-color:#FFFFFF;
    color:#404348;
    font-family: 'Open Sans', sans-serif;
    text-align:justify;
    background-color:#FFFFFF; 
    min-height:600px;
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
    }

    #footer{
    height: 4em;
    background-color:#FFFFFF;
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
    }