Blocks do not fit into the bootstrap grid. How to make it a table?

Question

css

There is this code:

<div class="container">
    <div class="row">
        <div class="img1 jopa">
        <img src="img/img1.png" alt="">
        <div class="text66">
        <p class="marketing">Marketing</p>
        <p class="seo">SEO Project Managment Tool</p>
        </div></div>

        <div class="img2 jopa">
        <img src="img/img2.png" alt="">
        <div class="text66">
        <p class="marketing">UI Design</p>
        <p class="seo">Desktop Sign Up Flow</p>
        </div></div>

        <div class="img3 jopa">
        <img src="img/img2.png" alt="">
        <div class="text66">
        <p class="marketing">UI Design</p>
        <p class="seo">Desktop Sign Up Flow</p>
        </div></div>

        <div class="img4 jopa">
        <img src="img/img2.png" alt="">
        <div class="text66">
        <p class="marketing">UI Design</p>
        <p class="seo">Desktop Sign Up Flow</p>
        </div></div>
      </div>
    </div><code lang="html">

</code>

<code lang="css">
.marketing {
  font-size: 18px;
  color: #768393;
}

.seo {
  font-size: 25px;
  color: #3a364f;
}

.text66 {
  position: relative;
  bottom: 171px;
  left: 230px;
}
</code>

При применении флексов появляется полоса прокрутки, уже не знаю что сделать, помогите, пожалуйста

Вот так вот стоят и все 
<img src="https://habrastorage.org/webt/5e/58/e9/5e58e914b41fb082930228.png" alt="image"/>

Answer 1

assignment of class mg-fluid to each picture helped

Answer 2

Why is this code supposed to work?

When applying flexes, a scrollbar appears, I don’t know what to do anymore, please help

Where do you use flex?
Have you read the bootstrap documentation?
https://getbootstrap.com/docs/4.4/layout/grid/
As far as I know bootstrap uses this structure

<div class="container">
  <div class="row">
    <div class="col-..">

you

<div class="container">
  <div class="row">
    <div class="img..  jopa">

If you don't want to write the 'col-..' class then at least write properties to your 'jopa' class.

.jopa { /* это если нужно 4 в ряд */
 flex: 0 0 25%; 
 max-width: 25%;
 padding-left: 15px;
 padding-right: 15px;
}

Or fix html

<div class="container">
  <div class="row">
    <div class="img..  jopa col-lg-4"> <!-- В зависимости от разрешения и нужной ширины колонки -->