How Would I Center Text In This DIV?

Question

I have a small offline website(uploaded @ http://razorcloud.cz.cc/ for this)with a header which contains a logo, a navigation bar, and a notification bar. I seem to have them all lined up properly and how I'd like. The downside, however, is that now the text inside of the notification bar(header-alert) is not centered correctly.

HTML:

<header class="header">
            <img style="float: left; padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
            <div class="bottom-header">
                <div class="navigation-bar" style="margin-top: 90px">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                            <div class="dropdown-container dropdown-shadow">
                                <ul class="dropdown-column">
                                    <li><a href="#">First</a></li>
                                    <li><a href="#">Second</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">Video</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear:left"></div>
            <div class="header-alert">
                This website is still under development!
            </div>
        </header>

CSS:

.header
{
    background-color: black;
    color: white;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    padding-top: 10px;
    position: relative;
}

.bottom-header
{
    display: block;
    position: relative;
    padding: 0 20px;
}

.navigation-bar
{
    clear: right;
    color: white;
    display: inline-block;
    font-size: 12px;
    float: right;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.header-alert
{
    background-color: white;
    border-bottom: 2px solid black;
    color: black;
    font-family: "GillSansStdLightRegular";
    font-size: 110%;
    margin-top: 15px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

I have tried multiple attempts to fix it, such as the display and margin attributes, but I seem unable to find a solution to does not include modifying the exact layout I currently have. It may be something simple though that is above my head. I'm not looking for any things like adding spaces to even it out.

Answer 1

Add height: 40px; in .navigation-bar