html - クラス「オファー」で最初の div を選択できないのはなぜですか?

Question

class で最初の div の背景色を設定しようとしていofferます。うまくいくと思っ.offer:first-childたのですが、うまくいきません。

も使用してみまし:nth-child(1)たが、それも機能していません。

どんな提案でも大歓迎です。

私のフィドル: http://jsfiddle.net/MNQar/

CSS

.offer:first-child { background-color: indianred; }

.special-offers .title, 
.special-offers .offer, 
.special-offers .more {
    height: 200px;
}
[class*="column"] {
    display: inline;
    float: left;
    margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}

HTML

<div class="row row-spacer special-offers">
    <div class="column2 title">
        <h2>Offers</h2>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Høyer tømmer lageret!</h3>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Super salg hos Vivikes</h3>

    </div>
    <div class="column1 more">
        <div class="caret"></div>
        <a href="#">More offers</a>
    </div>
</div>