Resize image and frame with CSS - html

Question

I'm wanting to add a small profile picture to my navbar, similar to how StackOverflow has on the top. However, when I resize the image for the navbar, it appears that the "container" is still present because when I hover over a part of the navbar that does not include the image, my page acts as if I hovered over the image. How do I fix this?
Image of error: https://imgur.com/a/jqzVeeK
Codepin of error: https://codepen.io/dansbyt/pen/ZEWvdwG
CSS:
.logo{
position: absolute;
left: 2%}
.money{
position: absolute;
top: 15%;
right: 6%;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white}
.profile{
position: absolute;
top: 1%;
right: 0%}
.profile img{float:right}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 21%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
HTML:
<div class="navbar">
<div class="logo"><img src="http://mrdansby.com/Resources/logo.png" style="width:27%; height:auto"></div>
<div class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/icons/i_home.png"><span> Dash</span>
<div class="profile"><img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius:50%;object-fit: contain"></div>
<div class="money">$100</div>
</div>
</div>

Answer 1

Instead of .navbar_links a{ use .navbar_links > a{. You do not want all a to have a hover effect and so on which was affecting the avatar.
see working code below (width makes it appear smaller here)
.logo{
position: absolute;
left: 2%}
.money{
position: absolute;
top: 15%;
right: 6%;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white}
.profile{
position: absolute;
top: 1%;
right: 0%}
.profile img{float:right}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 30%;
position: absolute;
width: 78%}
.navbar_links > a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links > a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
<div class="navbar">
<div class="logo"><img src="http://mrdansby.com/Resources/logo.png" style="width:27%; height:auto"></div>
<div class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/icons/i_home.png"><span> Dash</span>
<div class="profile">
<img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius:50%;object-fit: contain">
</div>
<div class="money">$100</div>
</div>
</div>

Answer 2

I found the answer to my problem. I should resize the div, not the image. See below.
.profile{
position: absolute;
width: 4%;
top: 1%;
right: 0%}
.profile img{float:right; max-width: 100%; max-height: 100%;display: block;}