页面Header、Div、Navbar无法适配屏幕宽度的CSS解决方案求助

如图所示，我的页面Header、Div、Navbar无法适配屏幕宽度，已经把全局margin和padding设置为0，但问题还是没解决。

以下是我的CSS代码：

*{
    margin: 0;
    padding: 0;
    
}

body{
    background-color: rgb(9, 9, 143);
    width: 100%;
    height: auto;
    background-image: url('https://i.pinimg.com/736x/a1/99/f3/a199f37446cbe1cd6701c693963971c3.jpg');
    background-blend-mode: color-burn;
}

div{
  width: 100%;
  height: auto;
}
ul.navbar li a:hover {
  background-color: #918e8e;
}

/* CSS for the active button */
ul.navbar li.active a {
  background-color: #4CAF50;
  color: white;
}

.main{
    background-color: rgb(8, 8, 87);
    background-image: url('https://w0.peakpx.com/wallpaper/290/679/HD-wallpaper-harry-potter-harry-potter-and-the-chamber-of-secrets-hogwarts-castle.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: lighten;
    display: flex-box;
    text-align: center;
 

}

h1{
    font-size: 50px;
    color: white;
    font-family: Rockwell;
    padding: 15px;
    width: 100%;
    height: auto;

}

p{
    color: rgb(158, 169, 179);
    font-family: Franklin Gothic Medium;
    padding: 20px;
}

.btn{
    padding: 10px 5px;
    background-color: rgb(30, 30, 123);
    color: whitesmoke;
    border:  1px solid transparent;
    border-radius: 10px;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
}

我的网站已部署至Netlify，链接为：https://myassessmentweb.netlify.app

恳请提供更有效的解决方案。

按以下步骤修改代码，解决适配问题：

1. 补充全局盒模型重置
   仅清除margin和padding不足以避免元素宽度溢出，添加box-sizing: border-box让元素的内边距、边框不会额外撑开宽度：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 新增核心属性 */
}

2. 修复body样式
   body默认占满屏幕宽度，无需额外设置width:100%，同时添加overflow-x: hidden防止横向滚动条出现：

body{
    background-color: rgb(9, 9, 143);
    min-height: 100vh; /* 替代height:auto，确保页面至少占满屏幕高度 */
    background-image: url('https://i.pinimg.com/736x/a1/99/f3/a199f37446cbe1cd6701c693963971c3.jpg');
    background-blend-mode: color-burn;
    overflow-x: hidden; /* 阻止横向溢出 */
}

3. 修正Navbar的默认样式
   ul元素默认带有左侧内边距，直接给导航栏ul添加样式确保宽度适配：

ul.navbar {
    list-style: none; /* 移除默认列表符号 */
    width: 100%;
    display: flex; /* 横向导航用flex布局 */
    padding: 0;
    margin: 0;
}

ul.navbar li {
    flex: 1; /* 让每个导航项平分宽度 */
}

ul.navbar li a {
    display: block; /* 让链接占满整个li区域 */
    padding: 10px;
    text-align: center;
}

4. 修正.main的display属性
   不存在display: flex-box这个属性，替换为display: flex实现元素居中：

.main{
    background-color: rgb(8, 8, 87);
    background-image: url('https://w0.peakpx.com/wallpaper/290/679/HD-wallpaper-harry-potter-harry-potter-and-the-chamber-of-secrets-hogwarts-castle.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: lighten;
    display: flex; /* 修正属性 */
    flex-direction: column; /* 垂直排列内部元素 */
    align-items: center; /* 水平居中 */
    text-align: center;
    width: 100%;
}

5. 确保h1不溢出
   h1设置width:100%时，配合box-sizing: border-box避免padding撑开宽度：

h1{
    font-size: 50px;
    color: white;
    font-family: Rockwell;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

完成以上修改后，页面元素即可正常适配屏幕宽度，不会出现横向溢出问题。

内容的提问来源于stack exchange，提问作者user22022653