Div不占用dekstop的全宽

Question

我试图在没有任何框架的帮助下制作响应式网页.它非常基本.

桌面视图:

所有3个div都应该显示在一起.

平板电脑视图

第一行的前两个div显示,而另一个显示在第二行,占据整个宽度.

移动视图:

每个div占据整个宽度.

问题:

在桌面上,前两个div显示在同一行,而第三个不显示.

以下是我的代码.

HTML

<h1>Our Menu<h1>
<div class="chicken">
chicken
</div>
<div class="beef">
beef
</div>
<div class="sushi">
sushi
</div>

CSS

h1{
    text-align:center;
}
.chicken,.beef, .sushi{
    padding:0 15px;
    margin:0px;
}

 @media screen and (min-width: 992px) {
    .chicken,.beef,.sushi{
        width:33.333333333333333333%;
        display:inline-block;
        float:left;
    }
}

 @media screen and (max-width: 767px) {
        .chicken,.beef,.sushi{
        width:100%;
        display:block;
    }
    /*
        .sushi{
            width:100%;
        }
   */
}
 @media screen and(min-width: 768px) and (max-width: 991px) {

    .chicken,.beef{
        width:50%;
        display:inline-block;
    }
}

小提琴:

这是小提琴.

Answer 1

使用box-sizing: border-box以便在宽度(也包括边框)中包含填充.否则,33.33333%将略微过大以适应一行中的所有3个div.