CSS alignment: left and right issue

Question

I'm expecting to get all text aligned right, although Support  |  Profile  |  Logout is aligned left, while Welcome is aligned right. Why does it happen?

<div id="header">
        <a href="#">Support</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#">Profile</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="#">Logout</a>
        <p>Welcome, Today is <script type="text/javascript">timeinit();</script></p>
    </div> 

   #header {
        background: #00557F;
        border-bottom: 2px gray;
        padding: 1em;
        width: 100%;
        height: 50px;
    }

    div#header p {
        color: #B7DDF2;
        font: 10px Arial;
        margin: 0;
        text-align: right;
        width: 100%;
    }

    div#header a { 
        text-decoration: none;
        color: #B7DDF2;
        font: 10px Arial;
        text-align: right;
        margin: 0;
        width: 100%;
    } 
    div#header a:hover { 
        font: 10px Arial;
        color: #FFCF8B; 
        text-decoration: underline;
        text-align: right;
        margin: 0;
        width: 100%;
    }

Answer 1

#header {
    text-align:right;
}

add above to your div