<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.