在页面上延伸两个div

我目前在这个小提琴中有代码：

的HTML

    <div class="stats-box">
        <div class="stats-title">Stats</div>
        <div class="stats-group">
            <div class="stats-team red"><div class="stats-amount">367</div></div>
            <div class="stats-team yellow"><div class="stats-amount">412</div></div>
        </div>
    </div>

SCSS没有花哨的SCSS，只是嵌套和变量，所以基本上是普通的CSS :-)

$red:       #e74c3c;
$yellow:    #f1c40f;
$white:     #ecf0f1;
.stats-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
    color: white;
    background-color: $white;

    .stats-title {
        color: black;
        font-weight: 700;
        text-align: center;
    }

    .stats-group {
        padding: 10px 0px;

        .stats-team {
            display: inline-block;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 10px;
            width: 50%;

            .stats-amount {
                background: rgba(0,0,0,0.13);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                padding: 7px 0px 11px 0px;
                width: 100%;
                height: 16px;
                text-align: center;
                margin: 0 auto;
            }
        }
    }

}


.red {
    color: $white;
    background-color: $red;
}

.yellow {
    color: $white;
    background-color: $yellow;

}

我要做的是使红色和黄色的框正好占据屏幕的50％，并排在一起。我也希望他们保留其10px的填充，但是我似乎无法做到这一点。当我超过48％（这显然取决于屏幕分辨率，并且对于其他人而言可能会有所不同）时，黄色框就会掉落。

我知道问题出在这一点，但我无法解决。

.stats-team {
    padding: 10px;
}

我是在简单还是在问太多？