Css 100视口宽度是否大于屏幕宽度？

Question

问题是关于我的部分比标题部分略宽，即使它们都具有相同的宽度。你甚至可以在图片中观察到这一点。蓝色背景是控制台中检查的标题部分，白色区域是关于我的部分这也显示了底部的侧面导航栏，这是一些麻烦。

 <!--Header Section   -->
    <section id="header">
        <div class="header-bg-overlay">
            <div class="header-bg">
                <div class="container">
                    <div class="hero-content">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about-me">
        <div class="about-section">

        </div>
    </section>

CSS

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
}

h5{
    color:white;
    font-size:75px;
    font-weight: bold;
}
h4{
    color:white;
    font-size:55px;
    font-weight: bold;
}
body{
    font-family: 'Roboto', sans-serif;
    margin:0;
    padding: 0;
}
.header-bg{
    width:100vw;
    height: 100vh;
    background-color: black;
    background: url('../assets/background.jpg')no-repeat center;
    background-position: -30px -80px;
}

#about-me{
    width:100vw;
    height: 100vh;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

Answer 1

尝试将两个部分的宽度更改为100％

Answer 2

vw =文档+滚动条。

修正：

.header-bg, #about-me {
  width: 100vw;
  max-width: 100%
}