在 nuxt.js 中使用 width:100vw 时有额外的空白

Question

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

我尝试了很多方法来解决这个问题，但仍然没有解决，我尝试在我的html 和body 标签中添加margin:0; 和padding:0;，但空白仍然存在。我在这个主题中尝试了另一个关于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>