960 Grid-контейнер, создающий пространство заголовка

Я разрабатываю веб-сайт, используя систему 960 Grid.

У меня есть 3 части в заголовке. Логотип, навигация и форма входа.

У меня есть медиа-запросы, настроенные как для логотипа, так и для входа в систему, когда страница становится ниже 1614 пикселей. Проблема заключается в том, что, в то время как центры логотипов, div, содержащий журнал, не работает.

Вот скриншот с подсветкой вокруг разделов, чтобы показать проблему.

Веб-страница

Heres попытка скрипка

http://jsfiddle.net/6m8K7/

Я не уверен, что вызывает это.

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;
    }