aタグが効かなくなった

Question

aタグが効かなくなりました。

下記のようにheaderにposition: fixed;をかけると
一部のaタグが効かなくなり
ボタンのhoverも効かなくなります。

header{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
}

aタグ効かなくなったところ

      <a class="btn-flat-border" href="#">OnlineLesson</a>

.btn-flat-border {
    font-size: 13px;
    font-family: 'Londrina Shadow', cursive;
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
    transition: .4s;
    margin-left: 55%;
    margin-top: 3%;
    .btn-flat-border:hover {
      background: #67c5ff;
      color: white;
    }
  }

原因ご教授お願いします。

Answer 1

height: 100%;が原因でした。

header{
  width: 100%;
  // height: 100%;
  position: fixed;
  z-index: 1;
}