全角 div 没有出现

Question

I am creating a site and often I'm getting a fairly big amount of bugs.

我现在要解决的是我的div没有出现在屏幕上

我的代码：
1) index.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) style.css

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

因此，名为 titl 的 div 用于显示并位于页面的最顶部，但我在那里只看到 "test" 行。

我尝试了什么？好吧，使用没有用的 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

使用 background-color 代替 color 如：

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

Answer 2

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>

全角 div 没有出现

Full width div doesn't appear

html

css

format

containers

position