Если используете бутсрап , то почитайте статью Grid system.
Ну все же за Вас придумали, зачем изобретать велосипед ?
<div class="conatainer">
</div class="row">
<div class="col">
Первый элемент
</div>
<div class="col">
Второй и тд
</div>
</div>
</div>
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px)
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1140px;
}
@media (min-width: 992px)
.container, .container-lg, .container-md, .container-sm {
max-width: 960px;
}
@media (min-width: 768px)
.container, .container-md, .container-sm {
max-width: 720px;
}
@media (min-width: 576px)
.container, .container-sm {
max-width: 540px;
}
@media (min-width: 1200px)
.container {
max-width: 1140px;
}
@media (min-width: 992px)
.container {
max-width: 960px;
}
@media (min-width: 768px)
.container {
max-width: 720px;
}
@media (min-width: 576px)
.container {
max-width: 540px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
