How do I get rid of this phantom element in my button - html

Question

The phantom whitespace
<button onClick={onDropdownClick} className="menu-trigger">
<img
className="google-profile-photo"
src={currentUser.photoURL}
alt="User Avatar"
/>
<span>
<ArrowDown />
</span>
</button>
I want the img tag and the span to be next to each other with no space in between. I cannot get rid of this whitespace in the middle. Does anyone know how?
.menu-trigger {
display: flex;
width:auto;
min-height: 5rem;
position: relative;
background: white;
border-radius: 0.3rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 6px;
box-shadow: 8px 16px 5rem #eeeeee;
vertical-align: middle;
transition: box-shadow 0.4s ease;
margin-top: 1rem;
border: none;
}
.google-profile-photo {
border-radius: 50%;
margin: 2%;
width: 50%;
height: 100%;
}

Answer 1

You'll need to give the image element flex: 1 so it can fill up that space. Here's a somewhat minimized example...
.menu-trigger {
display: flex;
min-height: 3rem;
position: relative;
background: white;
cursor: pointer;
align-items: center;
padding: 4px 6px;
border: 1px solid black;
width: auto;
}
.google-profile-photo {
margin: 2%;
border-radius: 50%;
flex: 1;
height: 100%;
}
<button class="menu-trigger">
<img
class="google-profile-photo"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAADFBMVEXU3ej///8AAAATExOMrozEAAAAdElEQVR4XpXPsQ2DMBRF0StX4D1c4IYRmAJkeQKPwRL0NJGQp6OK0hG9L5wqRXKbf6RXfX4qrvhDCDtDXoVCWBAS4SlML8KlaTyJDa4K/9QZHPhqQT+r5Rt8g/tgu8FDyMAgJMBrK9zbLsRttneg5gMLu603mI0q2s7nekMAAAAASUVORK5CYII="
alt="User Avatar"
/>
<span>
↓
</span>
</button>

Answer 2

use this:
justify-content: center;
and this for your second question :
background-size: cover