неправильные пропорции с сеткой

Question

Я пытаюсь создать адаптивный веб-сайт, и я застрял с этой проблемой: я применяю систему сетки к div, но получаю неправильные пропорции, как показано на рисунке ниже:

В области просмотра 320px:

В панели инструментов устройства с 320px тоже:

Я хочу знать причины такого поведения.Я думаю, что это что-то в ширину области просмотра ??и заранее спасибо

вот мой код:

HTML:

<div class="blue-box">
 <p class="container-3"><span  data-aos="fade-right"  data-aos-duration="1800"
    class="word-bb-1">well </span><span
   class="word-bb-2"
    data-aos="fade-left"  data-aos-duration="2000">I think your first
  question</span>
  <span class="word-bb-3" data-aos="fade-right"   data-aos-duration="1500">is about Amine right</span>
  <span class="word-bb-mark" data-aos="fade-down-left"  data-aos-duration="2000">?!!!</span>
  <img src="../vector/murva 1.1.png" class="img-box" alt=""  data-aos="fade-down"
   data-aos-duration="1500">
</p>
</div>

CSS

  .blue-box {
    margin-top: 10vh;
    width: 100vw;
    height: 33vh;
    background-color: #33cccc;
  }

  .img-box {
    width: 40vw;
        position: relative;
        left: -7vw;  }

  .container-3 {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 16vh auto 3vh auto;
    color: #ffffcc;
    font-family: Roboto;
    grid-column-gap: 5vw;
  }

 .word-bb-1 {
   font-size: 10vh;
   font-weight: bold;
   text-transform: capitalize;
   margin-top: 5vh;
   margin-left: 10vw;
  }

  .word-bb-2 {
    margin-top: 8vh;
  }

  .word-bb-3 {
    font-size: 7vw;
    grid-column: 1/3;
    text-align: center;
    font-weight: bold;
  }

  .word-bb-mark {
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    grid-column: 1/3
  }

Answer 1

Добавьте text-align: right к вашему .word-bb-1 промежутку.Это оставшееся пространство между словом «Колодец» и концом растянутого промежутка.

Любой элемент в макете сетки будет растянут, чтобы охватить всю область сетки, в которой он находится, поэтому, если вы хотите, чтобы элементыиметь некоторое выравнивание внутри области, которую вы должны использовать оболочки или, если это просто текст, выровнять его.

.word-bb-1 {
   ...
   text-align: right;
}