文字が真ん中にいきません

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="test.css"> <title>CSS入門</title> </head> <body> <div id="headline"> <h1>CSS入門</h1> <P>これは段落です。</P> </div> <div class="main"> <h2>これは見出しです。</h2> <p>これは<span class="light">例</span>です。</p> <p> <a href="https://saruwakakun.com/">ホームページ</a> 戻ります。</p> </div> </body> </html>

@charset "UTF-8"

body {
background: #fffbf4;
text-align: center;
}

h1{
color: #f89174;
}

#headline{
border-bottom: dotted 2px #f89174;
}

#headline p {
font-size: 1.2em;
}

h2{
color: orange;
}

a{
color: gray;
}

kei344

2020/05/04 03:40

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

@charsetを指定する場合は行末に;が必要です。
参照: MDN
そちらが原因でした。
恐らく背景色も適用されていないなどの原因も解消できるかと思います。

動作サンプル

CSS
1@charset "utf-8";
2
3body {
4  background: #fffbf4;
5  text-align: center;
6}
7
8h1 {
9  color: #f89174;
10}
11
12headline {
13  border-bottom: dotted 2px #f89174;
14}
15
16headline p {
17  font-size: 1.2em;
18}
19
20h2 {
21  color: orange;
22}
23
24a {
25  color: gray;
26}
27