<div class="conteiner">
<div class="column">
<div class="column__item">
<div class="column1"></div>
</div>
<div class="column__item">
<div class="column1"></div>
</div>
<div class="column__item">
<div class="column1"></div>
</div>
<div class="column__item">
<div class="column1"></div>
</div>
</div>
<div class="column offer">
<div class="column__item">
<div class="offer-block"></div></div>
<div class="column__item">
<div class="offer-block"></div></div>
<div class="column__item">
<div class="offer-block"></div></div>
<div class="column__item">
<div class="offer-block"></div></div>
<div class="column__item">
<div class="offer-block"></div></div>
<div class="column__item">
<div class="offer-block"></div></div>
</div>
</div>
.conteiner{
display: flex;
flex-direction: column;
}
.column{
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: 2px solid gray;
padding: 10px;
}
.column__item {
width: calc(100% / 6 - 20px);
display: flex;
align-items:center;
justify-content: center;
margin: 10px;
}
.column1{
padding: 40px;
background: red;
}
.offer{
border-bottom: 2px solid gray;
padding: 10px;
}
.offer-block{
padding: 40px;
background: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.