"Итак, у меня есть приведенный ниже код, я хочу добавить поля для разделения столбцов, чтобы они не касались друг друга. Однако каждый раз, когда я это делаю, последний столбец опускается ниже и создает новую строку. Я используюБутстрап. Как я могу предотвратить это? "
<div class="container attributes-div">
<div class="row attributes">
<div class="col-xl-4 attribute-center info-1">
<img class="attribute-pic" src="house2.png">
<h3>Quality Cleaning</h3>
<h5>We strive to leave your home spotless! It is always our
goal to have your clean at it's best!</h5>
</div>
<div class="col-xl-4 attribute-center info-2 middle-attribute-margin">
<img class="attribute-pic" src="dollarsign2.png">
<h3>Affordable Rates</h3>
<h5>We offer REASONABLE RATES that won't hurt your pocket!</h5>
</div>
<div class="col-xl-4 attribute-center info-1 info-3">
<img class="attribute-pic" src="maid.png">
<h3>Professional Staff</h3>
<h5>We listen to our customers and make sure to leave each of
their homes to their liking. If you aren't satisfied, we aren't
satisfied either!</h5>
</div>
</div>
</div>
" Ниже мой CSS: "
.attributes-div{
margin-top: 200px;
max-width: 90%;
}
.attribute-pic{
width: 50px;
}
.attribute-center{
text-align: center;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.info-1{
background: linear-gradient(70deg,#F0E4F0,#eef2f3,#F0E4F0);
background-repeat: no-repeat;
}
.info-2{
background: linear-gradient(70deg,#dfeff5,#eef2f3,#dfeff5);
background-repeat: no-repeat;