CSS適用したときにブラウザが重くなる

ボックス全体をリンクにしたのですが、ボックスの中にある文字とその左右しかクリックが反応しないことがわかりました。

つまりボックスの中の文字をクリックすれば正常に動作します。

PHPファイルにCSSで装飾した途端にブラウザが重くなりました。

CSSファイルを保存し、Chromeで確認したところCSSが反映されませんでした。何度かページをリロードするとCSSが適用されました。また、一度Chromeを閉じてから再び開くと、編集前のCSSが適用されてたりもします。

またCSSで装飾してから、ブラウザの動作が非常に遅いです。URLをクリックしてもリンクに飛ばず、2、3回クリックすると成功します。

Chromeの問題かと思い、Edgeでも試したのですが同じく動作が鈍いです。

CSS装飾前のPHPファイルは何の問題もありませんでした。Chromeのキャッシュ等を削除しましたが変化はありませんでした。

主な問題点を挙げると

・リンクをクリックしてもなかなかURLに飛ばない(マウスの問題ではありません)
・CSSの反映に時間がかかる

です。なにか解決法がわかる方がいれば教えてください。

以下追記です。

HTMLとCSSのコードの一部です(ホーム画面)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HOME</title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>

  <div class="head">
    <h1>HOME</h1>
  </div>

  <br>

  <div class="toko">
    <a href="input.php">
      <h1 class="moji">投稿</h1>
    </a>
  </div>

  <br>

  <div class="toko">
    <a href="search.php">
    <h1 class="moji">検索</h1>
    </a>
  </div>

</body>
</html>

CSS
1@charset "UTF-8";
2
3.head{
4  text-align: center;
5}
6
7.toko{
8  width: 500px;
9  padding: 20px;
10  background: #00BFFF;
11  text-align: center;
12  border-radius: 15px 15px 15px 15px;
13  margin: 0 auto;
14}
15.toko:hover{
16  opacity: 0.5;
17}
18
19a{
20  text-decoration: none;
21}
22
23.moji{
24    color: #ffffff;
25}
26