html、cssでレイアウトしていますが、wrapperが効いてくれません。

Question

wrapperが途中までしか効かず、ul liタグまで全体にかかってくれず解決策を探しています。

<div id="wrapper">
        <section>
            <h2>Portfolio</h2>
            <ul id="gallery">
                <li>
                    <a href="g1.jpg">
                        <img src="g1.jpg" alt="">
                        <p>Pink bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g2.jpg">
                        <img src="g2.jpg" alt="">
                        <p>Green bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g3.jpg">
                        <img src="g3.jpg" alt="">
                        <p>Blue bubble.</p>
                    </a>
                </li>
                <li>
                    <a href="g4.jpg">
                        <img src="g4.jpg" alt="">
                        <p>red bubble.</p>
                    </a>
                </li>
            </ul>
        </section>
    </div>

body {
    font-family: YuGothic, "游ゴシック", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro", sans-serif;
    background: #ddd;
    font-size: 14px;
}
#wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
}

ググったりして、中央よせにするとこまではできたのですが、バックグラウンドカラーが下までいきません。
ご教示いただけたら幸いです。
すみませんが何卒よろしくお願いいたします。

Comments

[maisumakun]

（勘違いなので削除）

[cerfweb]

提示されている以外に関係のあるスタイル指定があるのではないでしょうか。
もし可能でしたら問題となっている部分のスクリーンショットを見せていただけますか。

[nmamaworker]

先ほど質問の方にショットを添付いたしました。
このようなやり方で合ってますでしょうか？
不慣れで恐れ入ります。。
もう少しわたしの方でも検索したりしてみます。
お忙しいところありがとうございます。

Answer 1

もう一つの質問の方で見かけましたが、#gallery liにfloat: left;を指定されていませんか。その場合、#wrapperにoverflow: hidden;を指定することで解決されると思います。

余談ですが、floatを使ったこのようなやり方は一昔前のやり方で、今はflexやgridという便利なものがありますので、こちらを学ばれることをお勧めします。

Answer 2

背景色を画面の高さ一杯まで広げたいということでしょうか。

#wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    overflow: hidden;
}

Answer 3

ul liタグまで全体にかかってくれず解決策を探しています。

確認したところ、ul liまではかかっているようです。

バックグラウンドカラーが下までいきません。

あまりおすすめはしませんが、

#wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    height:100vh;
}

一番下の行を追加しています。

これで如何でしょうか？