CSS specific, parent container overloads additional container

I'm struggling a bit with some of the custom 960.gs classes that I use. The problem occurs when I use a sub-container, and the sub-container column simply inherits the width from the column rules of the main container.

In my opinion, the inner cells (foo + bar) should be green. So they should get the rules .container-6 .grid-3instead.container-8 .grid-3

I know a parameter !importantin CSS, but first I would like to explore other options, because that would be a problem if the situation were the other way around.

HTML

<div class="container-8">
    <div class="grid-3">
        <div class="container-6">
            <div class="grid-3 alpha">foo</div>
            <div class="grid-3 omega">bar</div>
        </div>
    </div>
    <div class="grid-5">test
    </div>
</div>

CSS

body {
  min-width: 990px;
}

div {
    padding: 5px 0;
}

.container-6 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid yellow;
    width: 684px;
}
.container-6 .grid-3 {
    width:312px;
    border: 1px solid green;
}
.container-8 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    border: 1px solid silver;    
}
.container-8 .grid-3 {
    width:340px;
    border: 1px solid blue;    
}
.container-8 .grid-5 {
    width:580px;
    border: 1px solid red;    
}

.alpha {
    margin-left: 0 !important;
}

.omega {
    margin-right: 0 !important;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8 {
    display:inline;
    float: left;
    position: relative;
}

I made this script to illustrate my problem. I took out rules 960.gs not related to it.

Fiddle

In my opinion, the inner cells (foo + bar) should be green. So they should get the rules .container-6 .grid-3instead.container-8 .grid-3