cssCSSで実装したハンバーガーメニューのラインがなぜか一部太くなってしまいます

ハンバーガーメニューをCSSのみで実装したのですが、なぜか三本線の一番上の線だけが、他の2本の線より太く見えてしまいます。

解決方法分かる方教えていただきたいです。

コードは以下の通りです

  <div id="hello">

    <input type="checkbox" id="ham">
    <label  for="ham">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </label>

    <ul class="small">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
    </ul>

    <div class="show">
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
      </ul>
    </div>
  </div>

*,*::before,*::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  text-align: center;
}

#hello
{
height: 300px;
background-color: blue;
color:white;
position: relative;
}

.small ,
.small li{
  transform: translateX(-2000px);
 
}

label{
  text-align: left;
  background-color:#fff;
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 3px;
}


.small li:last-of-type{
  margin-right: 2%;
}

#ham{
  transform: translateX(-5000px);
}

#ham:checked ~ .show{
display: block;
transform: translateX(0);
}

.show{
  background-color: chartreuse;
  transform: translateX(-2000px);
  transition:  all .4s;
  text-align: left;
  color: black;
  display: block;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
}

.show li{
  list-style-position: inside;
}

.line{
  width: 30px;
  height: 2px;
  background-color: black;
  padding:1px;
  margin: 5px;
}

@media screen and (min-width:980px){
  .small{
    padding: 0;
    margin: 0;
    background-color: coral;
    text-align: right;
    transform: translateX(0);
  }

.small li{
    list-style: none;
    display: inline-block;
    width: 10%;
    padding: 5px;
    background-color: chartreuse;
    text-align: center;
    margin: 2% auto;
    transform: translateX(0);
   
  }

  #ham,label{
    display: none;
  }

  #ham:checked ~ .show{
    display: none;
    transform: translateX(0);
    }
  
}