Html 相对位置覆盖背景颜色

我有两个问题，为什么相对位置的部分h1标题是白色的，即使背景颜色是蓝色的

如何使该元素居中，使其始终居中，无论屏幕大小如何

<h1 id="maintitle">Find your new css!</h1>

html {
    background-color: rgb(171, 248, 235);
    font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}

h1#maintitle {
    position: relative;
    margin: 0 0 0 0;
    width: 400px;
    padding: 10px;
    width: 50%;
    top: 50%;
}

找到你的新css！
html{
背景色：rgb（171248235）；
字体系列：无衬线，塔荷马，威尔达那，“新罗马时代”；
}
h1#主要标题{
位置：相对位置；
保证金：0；
宽度：400px；
填充：10px；
宽度：50%；
最高：50%；
}

正文{
背景色：rgb（171248235）；
字体系列：无衬线，塔荷马，威尔达那，“新罗马时代”；
}
h1#主要标题{
保证金：0；
文本对齐：居中；
}

---

找到你的新cssJSFIDLE上有一个配置，添加了白色背景。它发生在我的vscode工作中，也请检查您的配置。如果检查元素，您会注意到主体元素设置了背景色