不显示全宽div

Question

我正在创建一个网站，经常会出现相当多的BUG。

我现在想解决的是，我的div不出现在屏幕上。

我的代码1) 索引.html

...
<link rel="stylesheet" type="text/css" href="style.css">
...
<div class="content">
    <div class="titl">
        <a class="atitle" href="#" target="_self">test</a>
    </div>
</div>
...

2) 风格.css

div.titl {
    width: 100%;
    color: #414042;
    height: 50px;
    transition: .25s;
}

所以，那个叫titl的div曾经出现并在页面的最上面，但我在那里只得到 "测试 "一行。

我试过什么办法？那么，使用 position: absolute; 这没有工作。

编辑: 我的 a.atitle 的代码。

a.atitle {
    text-align: center;
    display: block;
    font-family: 'Kanit', sans-serif;
    color: white;
    transition: .25s;
    font-size: 32px;
    position: absolute;
}

a.atitle:hover {
    display: block;
    text-align: center;
    font-size: 48px;
    color: #414042;
}

a.atitle:visited {
    display: block;
    text-align: center;
    color: #FF6E4E;
}

Answer 1

div.titl {
  width: 100%;
  background-color: #414042; /* Change from color to background-color */
  height: 50px;
  transition: .25s;
}

a.atitle {
  text-align: center;
  display: block;
  font-family: 'Kanit', sans-serif;
  color: white;
  transition: .25s;
  font-size: 32px;
  position: absolute;
}

a.atitle:hover {
  display: block;
  text-align: center;
  font-size: 48px;
  color: #414042;
}

a.atitle:visited {
  display: block;
  text-align: center;
  color: #FF6E4E;
}

<div class="content">
  <div class="titl">
    <a class="atitle" href="#" target="_self">test</a>
  </div>
</div>

Answer 2

使用 background-color 代替 color 喜欢。

div.titl {
    width: 100%;
    background-color: #414042;
    height: 50px;
    transition: .25s;
}