HTMLのリンクのクリックできる範囲を広げる

HTMLのリンクのクリックできる範囲を広げるためにCSSでaタグにプロパティdisplay:blockを記述したのですが、効果が見られません、原因と対処法を教えてください。
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
    <title>Progate</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="progate.css">
    <link rel="stylesheet" href="media.css">
  </head>
  <body>
    <header>
      <div class="header1">
       <img src="https://prog-8.com/images/html/advanced/main_logo.png">
       <span class="fas fa-bars"></span>
       <div class="menuran">
         <a href="https://progate.github.io/html-dev/#">レッスン</a>
         <a href="https://progate.github.io/html-dev/#">新規登録</a>
         <a href="https://progate.github.io/html-dev/#" class="roguin">ログイン</a>
       </div>
      </div>
    </header>
  </body>
</html>

```ここに言語を入力
css
*{
  box-sizing: border-box;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
body{
  font-family: "Hiragino Kaku Gothic ProN";
}
.header1{
  height:64px;
  background-color:rgba(34,49,52,0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img{
  width: 125px;
  margin-left: 14px;
}
.fa-bars{
  display: none;
}
.menuran{
  font-size: 16px;
  display: flex;
}
header a{
  color:white;
  padding:0 24px;
  border: solid 1px red;
  display: block;> 引用テキスト
}
.roguin{
  padding-right: 12px;
}
![イメージ説明](7d953a5e37868a177a284776c9f54b63.png)