У меня есть 4 деления, которые установлены, чтобы плавать влево, но конец деления продолжает переносить две новые строки на меньший экран, что действительно раздражает меня ... я хочу, чтобы они масштабировались с размером экрана, чтобы они всегда оставались на одной строке независимо размера экрана ... и я пытаюсь не использовать таблицу (что очень заманчиво, учитывая, что они надежны для этого !!!)

Мне интересно, как исправить эту досадную проблему, чтобы они всегда оставались на месте независимо от размера экрана?

У меня есть это как мой CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

Мой HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

Пожалуйста, помогите: D