html - 当使用宽度 :100vw in nuxt. js 时会有额外的空白

Question

我正在我的 nuxt.js 中构建组件横幅。

我尝试了很多方法来解决这个问题，但仍然没有解决，我尝试添加margin:0;和 padding:0;在我的 html和 body标签，但空白仍然存在。我在这个主题中尝试了另一个关于 using-100vw-and-vh-creates-extra-space-beyond-viewport-size-how-do-i-get-rid-of 的解决方案但是当我尝试时，结果仍然是一样的。我也尝试这个话题关于 100vw-causing-horizontal-overflow-but-only-if-more-than-one但没有运气。

这是我的横幅组件:

<template>
  <div id="paham-banner-career">
    <div class="banner-container">
      <h2>Let's See Where You Fit In</h2>
    </div>
  </div>
</template>

这是我的CSS:

<style lang="css" scoped>
#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>

谁能救我解决这个问题？

这就是我现在得到的

Answer 1

尝试添加 box-sizing

<style lang="css" scoped>

*{box-sizing: border-box;}

#paham-banner-career{
    font-family: "Nunito", sans-serif;
    background-color: #3b73c5;
    width: 100vw;
    max-width: 100%;
}

#paham-banner-career .banner-container{
    margin: 100px auto;
    padding: 25px 0px;
    text-align: center;
    max-width: 1200px;
}

#paham-banner-career h2{
    color: #ffffff;
    font-size: 2.5em;
    font-weight: bold;
}
</style>