Bootstrap 3中容器类之外的行中断的背景颜色

Question

我有一个非常基本的设置，因为我试图弄清楚为什么会发生这种情况。我有一个容器 div，在该容器内有 3 行。我正在尝试将背景颜色附加到其中一行，它确实有效，但是当我缩小到移动设备时，我看到容器类具有白色背景颜色，而我的行背景颜色占据了整个宽度而不是仅仅占用容器剪辑内的空间。

这是我的 HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Learn</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/respond.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="contentContainer">
            <section class="row row-steps">
                    <div class="col-xs-12 col-sm-4 track selectedTract">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 1:</span> Choose a Track</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  

                    <div class="col-xs-12 col-sm-4 track">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 2:</span> Choose a Course</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  

                    <div class="col-xs-12 col-sm-4 track">
                        <div class="row">
                            <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0">
                                 <h3><span>Step 3:</span> Choose a Lesson</h3>
                            </div>
                            <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0">
                                <img src="img/badge-dashed-empty.png" alt="dotted circle">
                            </div>
                        </div>
                    </div>  
            </section>
        </div>
    </div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

CSS：

body{
    background-color: #f4f5f7;
}

.contentContainer{
    background-color: #fff;
    border: 1px solid #dddddd;
}

.contentContainer.row-steps{
    background-color: #eaf2f5 !important;
}

.contentContainer img{
    height: 44px;
    width: 44px;
    margin: 5px;
}

.contentContainer h3{
    font-size: 14px;
}

.contentContainer h3 span{
    font-weight: bold;
}

.selectedTract{
    background-color: #63c4aa;
    color: #fff !important;
}

我的结果是什么样的：

我希望颜色保持在容器 div 的范围内

Answer 1

将overflow:hidden 应用于容器：

.contentContainer{
    background-color: #fff;
    border: 1px solid #dddddd;
    overflow: hidden;
}