容器内段落背景色不显示及横幅样式实现求助

我在学习过程中遇到了困惑，当前问题是：.sitetitle容器中的段落背景色无法显示。我想为这段随机轮换的文本创建一个全屏横幅背景，高度设为400px，让文本置于背景之上。

相关代码片段 #

HTML/PHP 代码 #

<dev class="sitetitle">
<dev class="sitetitle-text">
    <p>
        Wir bieten
        <?php
        $welcomewords = array(
            "Walkinggruppen", "Selbstverteidigungskurse", "Ganzkörperworkouts", "Aquafitness", "Mitterkindkurse", "Rehasport", "Fitness"
        );
        echo $welcomewords[array_rand($welcomewords)]
        ?>

    </p>
</dev>

对应CSS代码 #

.news{
background-color: #34495e;
}
.sitetitle{
    color: rgb(209, 195, 0);
    font-size: 60px;
    background-color: #718daa;
    background-position: center;
    
}

完整代码 #

完整CSS代码 #

.news {
  background-color: #34495e;
}

.sitetitle {
  color: rgb(209, 195, 0);
  font-size: 60px;
  background-color: #718daa;
  background-position: center;
}


/* Hier fängt die Navbar an */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}


/* ================================= 
      Media Queries
    ==================================== */

@media (min-width: 769px) {
  .header,
  .main-nav {
    display: flex;
  }
  .header {
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }
}

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* und hier endet sie */

完整HTML/PHP代码 #

<html>

<head lang="de">
  <title>Start [Gymnastikriege Dedenbach]</title>
  <link rel="stylesheet" href="stylesheet.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header class="header">
    <h1 class="logo"><a href="#">GR#Dedenbach</a></h1>
    <ul class="main-nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="#">Kurse</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Anmelden</a></li>
    </ul>
  </header>
  <dev class="sitetitle">
    <dev class="sitetitle-text">
      <p>
        Wir bieten
        <?php
                    $welcomewords = array(
                        "Walkinggruppen", "Selbstverteidigungskurse", "Ganzkörperworkouts", "Aquafitness", "Mitterkindkurse", "Rehasport", "Fitness"
                    );
                    echo $welcomewords[array_rand($welcomewords)]
                    ?>

      </p>
    </dev>
  </dev>
  <dev class="sitecontent">
    <dev class="showroom">
      <p> ich bin der Showroom
        <p>
    </dev>
    <dev class="news">
      <p>Hier kommen "news"

    </dev>
  </dev>
</body>

1. 修复核心标签错误 #

你代码里的<dev>是拼写错误，正确标签应为<div>，这是样式不生效的主要原因。

2. 调整CSS实现全屏横幅 #

修改.sitetitle的CSS属性，添加宽度、高度和布局规则，实现全屏400px高的横幅，并让文本居中：

.sitetitle {
  color: rgb(209, 195, 0);
  font-size: 60px;
  background-color: #718daa;
  width: 100%; /* 全屏宽度 */
  height: 400px; /* 设置指定高度 */
  display: flex; /* 启用弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 0; /* 移除默认外边距 */
}

.sitetitle-text p {
  margin: 0; /* 移除段落默认外边距，避免多余间距 */
}

3. 修正后的HTML结构 #

将所有错误的<dev>替换为<div>，同时闭合未结束的<p>标签：

<div class="sitetitle">
  <div class="sitetitle-text">
    <p>
      Wir bieten
      <?php
                  $welcomewords = array(
                      "Walkinggruppen", "Selbstverteidigungskurse", "Ganzkörperworkouts", "Aquafitness", "Mitterkindkurse", "Rehasport", "Fitness"
                  );
                  echo $welcomewords[array_rand($welcomewords)]
                  ?>
    </p>
  </div>
</div>
<div class="sitecontent">
  <div class="showroom">
    <p> ich bin der Showroom</p>
  </div>
  <div class="news">
    <p>Hier kommen "news"</p>
  </div>
</div>

完成以上修改后，就能得到你想要的全屏横幅效果，背景色正常显示，文本居中悬浮在背景之上。

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