网格系统的比例不正确

Question

我正在尝试建立一个响应式网站，但我遇到了这个问题： 我正在将网格系统应用于div，但是比例错误，如下图所示：

在320像素的视口宽度中：

在设备工具栏中也为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。它是单词“ Well”和延伸范围的末尾之间的剩余空间。

网格布局中的任何元素都将被拉伸以覆盖其内部的整个网格区域，因此，如果要使元素在该区域内具有某种对齐方式，则必须使用包装器，或者，如果只是文本，则将其对齐。 / p>

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