css - 含まれている div 内のボックスのグリッドの配置の問題

Question

私はこの効果を達成しようとしています: http://codepen.io/chriscoyier/pen/wxdCD

SASS (.sass 構文) と haml を使用しています。CodePen では、コードを修正すると sass/haml ですべてが機能しますが、アプリに適用すると同じように動作しません。含まれている div 内のグリッドにボックスを浮かせたい#notecardContainer

残念ながら、私は参加したばかりで、写真を投稿するのに十分な評判スコアがありません。これは逆効果です。しかし、ここにリンクがあります：スクリーンショット

基本的に、ボックスは含まれている div 内に表示されていますが、含まれている#notecardContainerdiv の幅の約 50% だけ右に大きくオフセットされて#drawer います。サイズ。CodePen では機能するのに、私のコードでは機能しない理由がわかりません。

SASS : (注: インデントは StackOverflow に正しく変換されない場合があります)

#drawer 
    width: 680px
    height: auto
    margin-left: auto
    margin-right: auto

#notecardContainer
    width: inherit

.ul.box
    position: relative
    z-index: 1
    overflow: hidden
    list-style: none
    li
        position: relative
        float: left
        width: 300px
        height: 150px
        padding: 0
        border: 1px solid #000
        margin: 0 30px 30px 0
        background: #fff
        &:before,
        &:after
            content: ''
            z-index: -1
            position: absolute
        &:after
            left: auto
            right: 10px

ハムル:

    #notecardContainer
      %ul.box
         %li
         %li
         %li