このホバー効果を改善するにはどうすればよいですか？

Question

要素にカーソルを置こうとしていますが、セル全体を覆うようなホバーリング（色効果）が必要です。現在は半分しかカバーしていません。これは現在の見方です。ここにはcodepenがあります。

そしてこれは、私はそれを見てみたい方法です。以下は

コードです。

HTML

<div class="leftSideNav1"> 
    <div class="leftSideNav1__lists"> 
     <a href=""><i class="material-icons">home</i><br />Home</a> 
    </div> 
    <div class="leftSideNav1__lists"> 
     <a href=""><i class="material-icons">pause</i><br>YouTubers</a> 
    </div> 
    <div class="leftSideNav1__lists"> 
     <a href=""><i class="material-icons">assignment</i><br>Campaigns</a> 
    </div> 
    <div class="leftSideNav1__lists"> 
     <a href=""><i class="material-icons">message</i><br>Messages</a> 
    </div> 
    <div class="leftSideNav1__lists"> 
     <a href=""><i class="material-icons">pause</i><br>Videos</a> 
    </div> 
</div> 

CSS

.wrapper .leftSideNav1 {  
    grid-column: 1/2; 
    grid-row: 1/14; 
    background-color: #37474f; 
} 

.wrapper .leftSideNav1__lists { 
    padding: 15px;  
    font-size: 12px; 
    font-weight: bold; 
    text-decoration: none; 
} 

.wrapper .leftSideNav1__lists a{  
    color: #9e9e9e; 
    text-decoration: none; 
    box-sizing: border-box; 
    width: 100%; 
    padding: 0px; 
} 

.wrapper a:hover { 
    background-color: #f44336; 
    color: #fff; 
    display: block; 
    box-sizing: border-box;  
} 

Answer 1

.wrapper .leftSideNav1__listsをからのパディングを削除するので、CSSはそのようになります：

.wrapper .leftSideNav1__lists { 
    padding: 0; 
    font-size: 12px; 
    font-weight: bold; 
    text-decoration: none; 
} 

にタグをパディングを追加し、このようなことインラインブロックます

.wrapper .leftSideNav1__lists a { 
    color: #9e9e9e; 
    text-decoration: none; 
    box-sizing: border-box; 
    width: 100%; 
    padding: 15px; 
    display: inline-block; 
}