960 Grid container creating header space

I am developing a website using the 960 Grid system.

I have 3 parts to the header. The logo, the navigation, and the login form.

I have media queries set to center both the logo and the login when the page gets below 1614 pixels. The issue is that while the logo centers, the div containing the log in does not.

Here is an screen shot with highlighting around the divs to show the issue.

Webpage

Heres an attempted fiddle

http://jsfiddle.net/6m8K7/

I'm not sure what is causing this.

HTML

<div id="header">
    <div id="logoHolder">
        <a href="index.html">
            <img src="images/Pinnacle_ira logo_web.png" alt="Pinnacle IRA" width="125" height="84"/>
        </a>
    </div>
    <div id="loginHolder">
        <form action="https://www.theiracenter.com/customerLoginAction.gsx" method="post" >
            <label for="username">Username:</label>
            <input class="topLogin" type="text" name="login" />
            <br />
            <label for="password">Password:</label>
            <input class="topLogin" id="passwordText" type="password" name="password" />
            <input type="hidden" name="pd" value="C05" />
            <br />
            <input type="submit" />
        </form>
    </div>
    <br />
    <div class="container_12">
        <div class="grid_12">
            <div id="navigationHolder">
                <ul id="navigation">
                    <li><a href="guidedChoice.html">GuidedChoice</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="faq.html">FAQs</a></li>
                    <li><a href="investment.html">Investment Tools</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

CSS

/*Header*/
#logoHolder{
    float:left;
}
    #logoHolder img{
        margin:5px;
        margin-top:20px;
        vertical-align:bottom;
    }

    @media (min-width:0px) and (max-width:1614px){
        #logoHolder{
            width:125px;
            float:none;
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
    }


#loginHolder{
    float:right;
}

    @media (min-width:0px) and (max-width:1614px){
        #loginHolder{
            display:block;
            margin-left:auto;
            margin-right:auto;
        }
    }

label{
    font-family:Arial;
}

.topLogin{
    width:175px !important;
    height:20px !important;
}
    #passwordText{
        margin-left:22px;
    }

#navigationHolder{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:775px;
    background-color:brown;
    height:auto;
}

/*Navigation*/
#navigation{
    list-style:none;
    font-family:Arial;
    font-size:1.3em;
}

    #navigation li{
        float:left;
        display:block;
        color:#888888;
        margin-top:20px;
    }

    #navigation li:hover{
        color:white;
    }

    #navigation li a{
        color:inherit;
        text-decoration:none;
        display:block;
        text-align:center;

        padding:1.25em;
        padding-bottom:3.5em;
    }

    #navigation li a:hover{
        background:#609941;
        text-decoration:underline;
    }

Is there any particular reason you have two decelerations of?

@media (min-width:0px) and (max-width:1614px){

Either way, simply adding float:none to the #loginHolder selector should do the trick. -This would need to be placed in your second deceleration of the same break point.