gridview header overflow problem

[sangeeta_ratha]

I have a gridview where i need to keep its header fixed and also got a way to work on it. The problem is the whole thing works fine untill i increase the width of the gridview more than the width of the page. the header seems to be out of place then and isn't fitting with the rest of the columns in the grid view. Here's the code and style.

/*Gridview Header fixation style*/
.container
{
	/* So the overflow scrolls */
	overflow: auto;
}

.container table th
{
	/* Keep the header cells positioned as we scroll */
	position: relative;
	top:-1px;
	
	
}

.container table tbody
{
	/* For alignment of the scroll bar */
	overflow-x: hidden;
}

<div class="container" style="height: 150px; width:98%">
                    <asp:GridView ID="grdfresh" runat="server" DataKeyNames="bcolref,brcode" OnSelectedIndexChanging="grdfresh_SelectedIndexChanging"
                        Width="4000px" OnRowDataBound="grdfresh_RowDataBound" AutoGenerateColumns="False">
                        <Columns>
                                                                                                              <asp:BoundField DataField="ApplnDate" HeaderText="ApplnDate">
                                <ItemStyle HorizontalAlign="Right" />
                            </asp:BoundField>
                            <asp:BoundField DataField="PolicyNo" HeaderText="PolicyNo">
                                <ItemStyle HorizontalAlign="Right" />
                            </asp:BoundField>
                          
                                                 
                        </Columns>
                    </asp:GridView>
                </div>

notice the width of the div is 98% and that of gridview is 4000px so that the coulmns inside are arranged for proper readability.
when the gridview with is 1000 px everything is as perefct as it should be.