HTML/CSS中H2文本无法显示，调整边距干扰其他元素求助

你提到的H2实际是代码里的H3（<h3 class="textov">My Projects</h3>），无法显示的核心原因是页面布局限制导致该元素被挤出视口，以下是具体修复方案：

问题根源 #

1. body设置了height:100vh，强制页面高度等于视口高度，而#welcome-section的padding-top:300px占用了大量垂直空间，导致下方的#projects区域无法在视口内显示。
2. body默认flex布局为横向排列，#welcome-section和#projects会并排而非垂直分布，进一步挤压了显示空间。
3. h1,p的padding-left:160px破坏了文字居中效果，属于冗余样式。

修复步骤 #

1. 调整body布局与高度 #

将body的height:100vh改为min-height:100vh，同时添加flex-direction: column让子元素垂直排列：

body{
    z-index: 100;
    position: relative;
    display: flex;
    width: auto;
    min-height: 100vh; /* 保证页面至少占满视口，同时支持内容扩展 */
    flex-direction: column; /* 子元素垂直排列 */
    border-radius: 0px;
    background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
    background-repeat: no-repeat;
    margin : 0;
    padding: 0;
}

2. 优化welcome-section垂直居中方式 #

移除h1的固定padding-top，改用flex布局让#welcome-section在视口内垂直居中，避免占用不必要的高度：

#welcome-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 占满视口高度实现垂直居中 */
    z-index: 1000;
    text-align: center;
    margin-top: 0; /* 移除多余的margin-top */
}

h1{
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
    font-weight: 150;
    padding-top: 0; /* 移除固定padding */
}

3. 清理冗余样式并优化h3显示 #

删除h1,p的padding-left:160px，同时给.textov添加居中样式和内边距：

h1,p{
    color: white;
    padding: 0;
    margin: 0;
    position: relative;
    text-align: center;
    /* 移除padding-left:160px */
}

.textov{
    text-align: center; /* 文字居中 */
    padding: 2rem 0; /* 与上方内容拉开距离 */
    color: white;
    font-size: 1.8rem;
}

修改后的完整CSS代码 #

*{
     margin: 0;
     padding: 0;
}
 .nav{
     z-index: 300;
     display: flex;
     justify-content: flex-end;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background: red;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
}
 h1,p{
     color: white;
     padding: 0;
     margin: 0;
     position: relative;
     text-align: center;
}
 body{
     z-index: 100;
     position: relative;
     display: flex;
     width: auto;
     min-height: 100vh;
     flex-direction: column;
     border-radius: 0px;
     background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
     background-repeat: no-repeat;
     margin : 0;
     padding: 0;
}
 #welcome-section{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     z-index: 1000;
     text-align: center;
     margin-top: 0;
}
 h1{
     font-family: 'Poppins', sans-serif;
     font-size: 50px;
     font-weight: 150;
     padding-top: 0;
}
 .welcum {
     z-index: 2;
     font-size: 1.4rem;
     font-weight:0;
     font-style: italic;
     color: orangered;
     font-family: 'Poppins', sans-serif;
}
 html{
     scroll-behavior: smooth;
}
 a {
     display: flex;
     justify-content: space-between;
     margin-left: 30px;
     padding: 7px;
     font-size: 22px;
     color: white;
     text-decoration: none;
}
 .textov{
     text-align: center;
     padding: 2rem 0;
     color: white;
     font-size: 1.8rem;
}

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