ruby-on-rails - Rails 4 インターフェイスの問題を伴うアジャイル Web 開発

Question

私はこの本の例に従ってオンライン カタログを作成してきましたが、第 8 章のタスク C: カタログの表示で落胆するような問題がいくつかあります。

指示に従ってスタイルシートのコードを入力しましたが、本に示されているものと比較して、わずかに歪んだ結果が作成されました。本質的にマイナーで審美的ですが、本を読み進めようとするとき、私の自信に少しショックを与え、少しイライラします.

ご覧のとおり、境界線が少し混乱しているように見え、上部の画像がヘッダー テキストを覆っています。

私は何度も何度もコードを調べてきましたが、どこが間違っているのかわかりません。誰か手がかりを教えてもらえますか？

application.css.scss からのコード (ここにあると想定しています)

#banner {
    background: #9c9;
    padding: 10px;
    border-bottom: 2px solid;
    font: small-caps 40px/40px "Times New Roman", serif;
    color: #282;
    text-align: center;

    img {
        float: left;
    }
}

#notice {
    color: #000 !important;
    border: 2px solid red;
    padding: 1em;
    margin-bottom: 2em;
    background-color: #f0f0f0;
    font: bold smaller sans-serif;
}

#columns {
     background: #141;

     #main {
        margin-left: 17em;
        padding: 1em;
        background: white;
    }

    #side {
        float: left;
        padding: 1em 2em;
        width: 13em;
        background: #141;

        ul {
            padding: 0;

            li {
                list-style: none;

                a {
                    colour: #bfb;
                    font-size: small;
                }
            }
        }

    }

私にヒントを与える唯一のものは、崇高なテキスト2で、ハッシュ（#banner、#noticeなど）で始まるすべてが緑色ですが、#mainは何らかの理由ではないのですか?