Позиционирование div внутри div с использованием сетки css

Question

У меня есть раздел под моим баннером. Он имеет фон и разделен на три элемента. Используя сетку, я сделал их для позиционирования inline, но мой первый раздел содержит изображение, а не текст, а затем снова img, второй раздел содержит изображение и текст, а третий - только текст. Идите, как вы можете видеть ниже, как я могу расположить все в линию? Я не совсем понимаю значения в сетке, как и когда использовать, вы можете мне это объяснить?

Вот код:

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}

<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>

Answer 1

Вы должны указать тегу P отображаться в виде встроенного блока, в противном случае он автоматически принимает ширину 100%.

Смотрите здесь:

.banner-under .banner-content p {
   font-family: "Sintony";
   font-weight: 700;
   font-size: 14px;
   padding: 20px 5px;
   display: inline-block;
}

А вот фрагмент всего вашего кода, скомпилированного с этим (нажмите синюю кнопку внизу, чтобы увидеть, как он работает

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
  display: inline-block;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}

<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>