Div is not changing position no matter what I do

Question

I am trying to change the position of the div "home_square" but when I do it just stays in the same spot please help.

<div class="nav_square" class="home_square"></div>
        <div class="nav_square" class="specials_square"></div>
        <div class="nav_square" class="jobs_square"></div>
        <div class="nav_square" class="league_square"></div>
        <div class="nav_square" class="contact_square"></div>
<!--POSITION SAFE NAV SQUARES-->
        <div class="nav_square" class="safe_nav_squares" class="home_square"></div>
        <div class="nav_square" class="safe_nav_squares" class="specials_square"></div>
        <div class="nav_square" class="safe_nav_squares" class="jobs_square"></div>
        <div class="nav_square" class="safe_nav_squares" class="league_square"></div>
        <div class="nav_square" class="safe_nav_squares" class="contact_square"></div>

CSS:

.nav_square {
    background-color:green;
    width:100px;
    height:2px;
    z-index:22;
}
.home_square {
    position:relative;
    left:20px;
}
.safe_nav_squares {
    background-color:black;
    z-index:-1;
}

The safe nav squares are just so when I add my javascript and make the nav squares disappear that the other elements on the page will not change position.

Answer 1

Give a try with this code....

<div class="nav_square home_square"></div>
            <div class="nav_square specials_square"></div>
            <div class="nav_square jobs_square"></div>
            <div class="nav_square league_square"></div>
            <div class="nav_square contact_square"></div>
    <!--POSITION SAFE NAV SQUARES-->
            <div class="nav_square safe_nav_squares home_square"></div>
            <div class="nav_square safe_nav_squares specials_square"></div>
            <div class="nav_square safe_nav_squares jobs_square"></div>
            <div class="nav_square safe_nav_squares league_square"></div>
            <div class="nav_square safe_nav_squares contact_square"></div>

Answer 2

In HTML, classes must be separated by spaces, all within the same attribute. When you do this, also keep in mind that the order matters - rules from later classes always override earlier ones.

Example:

<div class="foo blah">
    I have two classes, foo and blah. When they disagree, blah wins.
</div>

Here is a tutorial that describes it in more detail: http://www.avajava.com/tutorials/lessons/how-do-i-assign-multiple-classes-to-an-element.html

Here is a useful Stack Overflow question: How to assign multiple classes to an HTML container?