如何调整Header元素位置，使其稍向内偏移或顶部居中？

你当前的CSS里，.header h1设置了width:100%，导致标题撑满整个屏幕宽度，想要实现顶部居中且向内偏移，可以通过以下两种方式修改：

方式一：自适应宽度+居中留白 #

这种方式让标题根据内容自动调整宽度，同时居中显示，左右留有空白实现向内偏移：

.header{
    display:flex;
    position:relative;
}
.header h1{
    position:fixed;
    top: 0; /* 固定在页面顶部 */
    width: fit-content; /* 宽度自适应内容 */
    max-width: 90%; /* 最大宽度限制为屏幕的90%，避免内容过长时撑满屏幕 */
    margin: 0 auto; /* 左右自动外边距，实现居中 */
    color:black;
    background:lightblue;
    padding:5px 20px; /* 左右内边距进一步调整内部空白 */
    text-align:center;
    border:3px solid lightblue;
    border-radius:8px;
}

方式二：占满大部分宽度+固定留白 #

如果希望标题占屏幕大部分宽度，同时左右留有固定空白：

.header{
    display:flex;
    position:relative;
}
.header h1{
    position:fixed;
    top: 0; /* 固定在页面顶部 */
    width: calc(100% - 40px); /* 总宽度减去左右各20px的空白 */
    margin: 0 20px; /* 左右各20px的外边距，实现向内偏移 */
    color:black;
    background:lightblue;
    padding:5px;
    text-align:center;
    border:3px solid lightblue;
    border-radius:8px;
}

关键修改点说明： #

• 添加top:0：确保标题固定在页面顶部，避免位置错乱
• 调整width/max-width：限制标题宽度，避免撑满屏幕
• 使用margin:0 auto或固定左右margin：实现居中或向内偏移的效果

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